@charset "UTF-8";
/*------------------------------------------
set
------------------------------------------*/
$colorBlue: #002380;
$colorPink: #E15C94;
$colorRed: #e50012;
$colorBrown: #bb6856;
$colorYellow: #ffed73;
$colorOrange: #D9601A;
$colorGray: #CCC;
$colorCream: #f5f5f5;
$colorBlack: #333333;
$colorDefault: #000;
$serif: 'Noto Serif JP', serif;
$sansserif: 'Noto Sans JP', sans-serif;
$en: 'League Gothic', sans-serif;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;
@mixin sm {
@media screen and (max-width: ($sm)) {
@content;
}
}
@mixin md {
@media screen and (max-width: ($md)) {
@content;
}
}
@mixin lg {
@media screen and (max-width: ($lg)) {
@content;
}
}
@mixin xl {
@media screen and (max-width: ($xl)) {
@content;
}
}
@mixin xl {
@media screen and (max-width: ($xxl)) {
@content;
}
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
}
html{
line-height: 1;
}
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix{
height: 1%;
}
.clearfix{
display: block;
}
/* End hide from IE-mac */
ol, ul{
list-style: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
.clear {
clear: both;
}
caption, th, td{
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote{
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after{
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{
display: block;
}
*, :after, :before {
box-sizing: border-box;
}
body{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
color: #333;
}
img{
height: auto;
max-width: 100%;
vertical-align: top;
}
a{
text-decoration: none;
}
@media screen and (max-width: 768px) {
.hidden-sp{
display: none !important;
}
}
@media screen and (min-width: 769px) {
.hidden-pc{
display: none !important;
}
}
/*------------------------------------------
サービス別レスポンシブ
------------------------------------------*/
/*youtube*/
.youtubeWrapper{
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtubeWrapper iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
/*googlemap*/
.ggmapWrapper{
position: relative;
/*padding-bottom: 56.25%;*/
height: 480px;
overflow: hidden;
}
.ggmapWrapper iframe,
.ggmapWrapper object,
.ggmapWrapper embed{
position: absolute;
top: -140px;
left: 0;
width: 100%;
height: 600px;
}
.ggmapWrapper iframe{
height: 800px;
}
/*------------------------------------------
color
------------------------------------------*/
$mainColor: #284259;
$subColor: #4D6F8C;
/* Color Theme Swatches in Hex */
$ファッション-1-hex: #F2F2F2;
$ファッション-2-hex: #0D1A26;
$ファッション-3-hex: #284259;
$ファッション-4-hex: #4D6F8C;
$ファッション-5-hex: #A68881;
/* Color Theme Swatches in RGBA */
$ファッション-1-rgba: rgba(242,242,242, 1);
$ファッション-2-rgba: rgba(13,26,38, 1);
$ファッション-3-rgba: rgba(40,66,89, 1);
$ファッション-4-rgba: rgba(77,110,140, 1);
$ファッション-5-rgba: rgba(165,135,129, 1);
/* Color Theme Swatches in HSLA */
$ファッション-1-hsla: hsla(0, 0, 95, 1);
$ファッション-2-hsla: hsla(208, 49, 10, 1);
$ファッション-3-hsla: hsla(208, 37, 25, 1);
$ファッション-4-hsla: hsla(208, 29, 42, 1);
$ファッション-5-hsla: hsla(11, 16, 57, 1);
/*------------------------------------------
cmn
------------------------------------------*/
//font-family: 'Noto Sans JP', sans-serif;
//fw-100,400,700
//font-family: 'Noto Serif JP', serif;
//fw-300,400,700
.zeitxt{
font-size: 70%;
}
@media screen and (max-width: 768px) {
}
/*------------------------------------------
ヘッダー
------------------------------------------*/
header{
height: 110px;
width: 100%;
background: rgba(255,255,255,0.9);
display: flex;
justify-content: space-between;
transition: 0.3s;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
.logoBox{
height: 100%;
padding-left: 30px;
display: flex;
align-items: center;
}
.headerTop{
display: none;
}
nav{
height: 100%;
padding-right: 30px;
display: flex;
align-items: center;
>ul{
display: flex;
li{
font-size: 14px;
color: #333;
position: relative;
cursor: pointer;
&:after{
content: "";
width: 100%;
height: 2px;
display: block;
background: $mainColor;
position: absolute;
left: 0;
bottom: -5px;
opacity: 0;
transition: 0.3s;
}
&:hover{
&:after{
opacity: 1;
bottom: -3px;
}
}
&:not(:last-child){
margin-right: 30px;
}
a{
color: inherit;
}
.inNav{
width: 600px;
position: absolute;
right: 0;
top: 1em;
ul{
padding: 10px 0 0 0;
display: flex;
justify-content: flex-end;
}
}
}
}
}
&.fix{
height: 80px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
@media screen and (max-width: 999px) {
.headInner{
width: 100%;
display: flex;
justify-content: space-between;
}
.headerTop{
display: block;
padding-right: 30px;
z-index: 1001;
}
nav{
display: none;
padding-right: 0;
background: #FFF;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 999;
>div{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
>ul{
display: block;
max-width: 500px;
padding: 0 5%;
margin: 0 auto;
li{
display: block;
font-size: 18px;
text-align: center;
&:not(:last-child){
margin-right: 0;
margin-bottom: 15px;
}
&:after{
content: none;
}
a{
color: #333;
transition: 0.3s;
&:hover{
opacity: 0.7;
}
}
.inNav{
width: inherit;
position: inherit;
right: inherit;
top: inherit;
ul{
padding: 10px 0 0 0;
display: block;
}
}
}
}
}
}
@media screen and (max-width: 768px) {
width: 100%;
height: 60px;
.logoBox{
height: 100%;
padding-left: 5%;
display: flex;
align-items: center;
img{
max-width: 130px;
}
}
.headerTop{
padding-right: 5%;
}
nav{
ul{
display: block;
}
}
&.fix{
height: 60px;
}
}
}
/*------------------------------------------
menuTrigger
------------------------------------------*/
.menuBtn{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.menu-trigger {
position: relative;
width: 40px;
height: 24px;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #333;
}
.menu-trigger span:nth-of-type(1) {
top: 0px;
}
.menu-trigger span:nth-of-type(2) {
top: 50%;
transform: translate(0, -50%);
}
.menu-trigger span:nth-of-type(3) {
bottom: 0px;
}
.menu-trigger.active span:nth-of-type(1) {
transform: translateY(11px) rotate(45deg);
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
transform: translateY(-11px) rotate(-45deg);
}
@media screen and (max-width: 999px) {
.menu-trigger.active span {
background: #333;
}
}
@media screen and (max-width: 768px) {
.menu-trigger {
width: 25px;
height: 15px;
}
.menu-trigger span:nth-of-type(2) {
top: 7px;
}
.menu-trigger.active span:nth-of-type(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-trigger.active span:nth-of-type(3) {
transform: translateY(-6px) rotate(-45deg);
}
}
//------------------------------------------------------------------------------------
//フッター
//------------------------------------------------------------------------------------
footer{
//アイコン用リンクテキスト
$icon_before: "data:image/svg+xml,";
$icon_instagram: "' xmlns='http://www.w3.org/2000/svg'>";
$icon_youtube: "' xmlns='http://www.w3.org/2000/svg'>";
$icon_facebook: "' xmlns='http://www.w3.org/2000/svg'>";
padding: 70px 20px;
@media screen and (max-width:768px) {
padding: 50px 4% 80px 4%;
}
*{
font-family: $sansserif;
}
//--------------------------------
//カスタム
//--------------------------------
&.custom{
$background_color: red; //背景
$link_ttl: green; //リンク見出しカラー
$link_ttl_hover: green; //リンク見出しカラー ホバー時
$link_color: blue; //リンクカラー
$link_color_hover: green; //リンクカラー ホバー時
$logo_color: yellow; //SVG野中ロゴカラー
$icon_color: "666333"; //SNSアイコンカラー（16進数 #無しの値）
$copyright_color: #FFF; //コピーライトカラー
//デフォルト値
$background_color: #000 !default;
$link_ttl: green;
$link_ttl_hover: green;
$link_color: #666 !default;
$link_color_hover: #666 !default;
$logo_color: #FFF !default;
$icon_color: "666666" !default;
$copyright_color: #FFF !default;
background: $background_color;
.logoBox svg{
fill: $logo_color;
}
.links{
dt{
color: $link_ttl;
a{
color: $link_ttl;
&:hover{
color: $link_ttl_hover;
}
}
}
dd{
color: $link_color;
a{
color: $link_color;
&:hover{
color: $link_color_hover;
}
}
}
}
.icon_x::before{
background-image: url( $icon_before + $icon_color + $icon_x );
}
.icon_instagram::before{
background-image: url( $icon_before + $icon_color + $icon_instagram );
}
.icon_youtube::before{
background-image: url( $icon_before + $icon_color + $icon_youtube );
}
.icon_facebook::before{
background-image: url( $icon_before + $icon_color + $icon_facebook );
}
#copy{
small{
color: $copyright_color;
}
}
}
//--------------------------------
//白背景
//--------------------------------
&.white{
background: #FFF;
$icon_color: '666'; //SNSアイコンカラー
$logo_color: #000; //野中ロゴカラー
$text_color: #666; //テキストカラー
*{
color: $text_color;
}
.logoBox svg{
fill: $logo_color;
}
.icon_x::before{
background-image: url( $icon_before + $icon_color + $icon_x );
}
.icon_instagram::before{
background-image: url( $icon_before + $icon_color + $icon_instagram );
}
.icon_youtube::before{
background-image: url( $icon_before + $icon_color + $icon_youtube );
}
.icon_facebook::before{
background-image: url( $icon_before + $icon_color + $icon_facebook );
}
}
//--------------------------------
//黒・グレー背景
//--------------------------------
&.black{
background: #000;
}
&.gray{
background: #333;
}
&.black,
&.gray{
$icon_color: 'FFF'; //SNSアイコンカラー
$logo_color: #FFF; //野中ロゴカラー
$text_color: #FFF; //テキストカラー
*{
color: $text_color;
}
.logoBox svg{
fill: $logo_color;
}
.icon_x::before{
background-image: url( $icon_before + $icon_color + $icon_x );
}
.icon_instagram::before{
background-image: url( $icon_before + $icon_color + $icon_instagram );
}
.icon_youtube::before{
background-image: url( $icon_before + $icon_color + $icon_youtube );
}
.icon_facebook::before{
background-image: url( $icon_before + $icon_color + $icon_facebook );
}
}
.icon_x,
.icon_instagram,
.icon_youtube,
.icon_facebook{
&::before{
display: inline-block;
width: 13px;
height: 13px;
margin-right: 5px;
content: "";
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 100%;
}
}
.inner{
width: 100%;
max-width: 1000px;
margin: 0 auto 30px auto;
display: flex;
justify-content: space-between;
gap: 50px 100px;
flex-wrap: wrap;
@media screen and (max-width:768px) {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.logoBox{
a{
transition: .3s;
&:hover{
opacity: .5;
}
}
}
.links{
flex: 1;
display: flex;
justify-content: space-between;
gap: 20px 50px;
flex-wrap: wrap;
@media screen and (max-width:768px) {
flex-direction: column;
}
dl{
display: flex;
flex-direction: column;
gap: 20px;
letter-spacing: .05em;
>div{
display: flex;
flex-direction: column;
gap: 5px;
}
dt{
font-size: 16px;
font-weight: 700;
@media screen and (max-width:576px) {
font-size: 15px;
}
}
dd{
font-size: 14px;
@media screen and (max-width:576px) {
font-size: 13px;
}
}
a{
text-decoration: underline;
&:hover{
text-decoration: none;
}
}
}
}
}
#copy{
text-align: center;
line-height: 1.2;
small{
font-size: 12px;
@media screen and (max-width:576px) {
font-size: 10px;
}
}
}
}
/*------------------------------------------
トップページ
------------------------------------------*/
.topPage{
#mainContents{
display: flex;
height: calc(100vh - 76px);
min-height: 850px;
.boxL{
min-width: calc(50% - 50px);
max-width: calc(50% - 50px);
display: flex;
align-items: center;
justify-content: center;
.logoBox{
margin-bottom: 90px;
text-align: center;
}
nav{
margin-bottom: 50px;
position: relative;
z-index: 100;
>ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
>li{
font-size: 14px;
position: relative;
cursor: pointer;
&:not(:last-child){
margin-right: 1em;
}
&:first-child{
display: none;
}
a{
text-decoration: none;
color: #333;
position: relative;
&:after{
content: "";
width: 100%;
height: 2px;
display: block;
background: $mainColor;
position: absolute;
left: 0;
bottom: -5px;
opacity: 0;
transition: 0.3s;
}
&:hover{
&:after{
opacity: 1;
bottom: -3px;
}
}
}
.inNav{
width: 120px;
padding: 10px;
position: absolute;
left: 0;
top: calc(1em + 5px);
background: rgba(255,255,255,0.5);
ul{
li{
font-size: 14px;
padding: 5px 0;
}
}
}
}
}
}
.informationBox{
position: relative;
h1{
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: $mainColor;
font-size: 20px;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
color: #FFF;
}
.box{
width: 100%;
padding: 30px 30px 30px 80px;
background: rgba(180,180,180,0.1);
position: absolute;
left: 110px;
bottom: -60px;
dl{
display: flex;
font-size: 14px;
&:not(:last-child){
margin-bottom: 10px;
}
dt{
min-width: 6em;
}
dd{
flex: 1;
}
}
}
@media screen and (max-width: 1259px) {
h1{
width: 130px;
height: 130px;
font-size: 16px;
}
.box{
width: 100%;
padding: 30px 30px 30px 30px;
background: rgba(180,180,180,0.1);
position: absolute;
left: 20px;
bottom: -90px;
dl{
display: flex;
font-size: 14px;
&:not(:last-child){
margin-bottom: 10px;
}
dt{
min-width: 3em;
}
dd{
flex: 1;
}
}
}
}
}
}
.boxR{
min-width: calc(50% + 50px);
max-width: calc(50% + 50px);
.mv{
ul{
li{
padding: 50px;
>div{
height: calc(100vh - 100px - 76px);
min-height: 750px;
}
.box_01{
background: url("../img/top/mv_01.jpg") no-repeat center / cover;
}
.box_02{
background: url("../img/top/mv_02.jpg") no-repeat center / cover;
}
.box_03{
background: url("../img/top/mv_03.jpg") no-repeat center right / cover;
}
}
}
}
}
}
}
@media screen and (max-width: 1023px) {
.topPage{
#mainContents{
display: block;
height: inherit;
min-height: 700px;
position: relative;
padding: 100px;
.boxL{
width: 100%;
min-width: inherit;
max-width: inherit;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
background: rgba(255,255,255,0.8);
.logoBox{
margin-bottom: 50px;
text-align: center;
img{
max-width: 70%;
}
}
nav{
margin-bottom: 50px;
position: relative;
z-index: 100;
>ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
>li{
font-size: 14px;
position: relative;
cursor: pointer;
&:not(:last-child){
margin-right: 1em;
}
&:first-child{
display: none;
}
a{
text-decoration: none;
color: #333;
position: relative;
&:after{
content: "";
width: 100%;
height: 2px;
display: block;
background: $mainColor;
position: absolute;
left: 0;
bottom: -5px;
opacity: 0;
transition: 0.3s;
}
&:hover{
&:after{
opacity: 1;
bottom: -3px;
}
}
}
.inNav{
width: 120px;
padding: 10px;
position: absolute;
left: 0;
top: 1em;
ul{
li{
font-size: 14px;
padding: 5px 0;
}
}
}
}
}
}
.informationBox{
position: relative;
h1{
width: 130px;
height: 130px;
font-size: 16px;
}
.box{
width: 100%;
padding: 30px 30px 30px 30px;
background: rgba(180,180,180,0.1);
position: inherit;
left: 20px;
bottom: inherit;
top: -20px;
dl{
display: flex;
font-size: 14px;
&:not(:last-child){
margin-bottom: 10px;
}
dt{
min-width: 3em;
}
dd{
flex: 1;
}
}
}
}
}
.boxR{
width: 100%;
height: 100%;
min-width: inherit;
max-width: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 1;
.mv{
height: inherit;
ul{
height: inherit;
*{
height: inherit;
}
li{
height: inherit;
padding: 50px;
>div{
height: 100%;
min-height: inherit;
}
.box_01{
background: url("../img/top/mv_01.jpg") no-repeat center / cover;
}
.box_02{
background: url("../img/top/mv_02.jpg") no-repeat center / cover;
}
.box_03{
background: url("../img/top/mv_03.jpg") no-repeat center right / cover;
}
}
}
}
}
}
}
}
@media screen and (max-width: 768px) {
.topPage{
#mainContents{
display: block;
height: inherit;
min-height: 700px;
position: relative;
padding: 30px;
@media screen and (max-width:625px) {
height: inherit;
}
.boxL{
width: 100%;
min-width: inherit;
max-width: inherit;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
background: rgba(255,255,255,0.8);
@media screen and (max-width: 500px) {
padding: 50px 25px;
}
.logoBox{
margin-bottom: 50px;
text-align: center;
}
nav{
margin-bottom: 50px;
position: relative;
z-index: 100;
>ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
text-align: center;
>li{
font-size: 14px;
position: relative;
cursor: pointer;
&:not(:last-child){
margin: 0 0 1em 0;
}
&:first-child{
display: none;
}
a{
text-decoration: none;
color: #333;
position: relative;
&:after{
content: "";
width: 100%;
height: 2px;
display: block;
background: $mainColor;
position: absolute;
left: 0;
bottom: -5px;
opacity: 0;
transition: 0.3s;
}
&:hover{
&:after{
opacity: 1;
bottom: -3px;
}
}
}
.inNav{
width: 100%;
padding: 10px;
margin-top: 10px;
position: inherit;
left: inherit;
top: inherit;
ul{
li{
font-size: 14px;
padding: 5px 0;
}
}
}
}
}
}
.informationBox{
position: relative;
h1{
width: 100%;
height: 40px;
font-size: 16px;
}
.box{
width: 100%;
padding: 30px 30px 30px 30px;
background: rgba(180,180,180,0.1);
position: inherit;
left: inherit;
bottom: inherit;
top: inherit;
dl{
display: flex;
font-size: 14px;
&:not(:last-child){
margin-bottom: 10px;
}
dt{
min-width: 3em;
}
dd{
flex: 1;
}
}
}
@media screen and (max-width: 549px) {
.box{
width: 100%;
padding: 30px 15px 30px 15px;
background: rgba(180,180,180,0.1);
position: inherit;
left: inherit;
bottom: inherit;
top: inherit;
dl{
display: block;
font-size: 14px;
&:not(:last-child){
margin-bottom: 10px;
}
dt{
min-width: 3em;
}
dd{
flex: 1;
}
}
}
}
}
}
.boxR{
width: 100%;
height: 100%;
min-width: inherit;
max-width: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 1;
.mv{
height: inherit;
ul{
height: inherit;
*{
height: inherit;
}
li{
height: inherit;
padding: 15px;
>div{
height: 100%;
min-height: inherit;
}
.box_01{
background: url("../img/top/mv_01.jpg") no-repeat center / cover;
}
.box_02{
background: url("../img/top/mv_02.jpg") no-repeat center / cover;
}
.box_03{
background: url("../img/top/mv_03.jpg") no-repeat center right / cover;
}
}
}
}
}
}
}
}
/*------------------------------------------
下層ページ cmn
------------------------------------------*/
.underPage{
#mainContents{
padding: 180px 0 30px 0;
}
h1{
margin-bottom: 100px;
font-size: 28px;
font-weight: 300;
font-family: 'Noto Serif JP', serif;
text-align: center;
}
}
.innerBox_1000{
max-width: 1000px;
margin: 0 auto;
}
.h2_style_01{
margin-bottom: 100px;
font-size: 20px;
font-weight: 300;
font-family: 'Noto Serif JP', serif;
text-align: center;
}
sup{
font-size: 55%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
@media screen and (max-width: 768px) {
.underPage{
#mainContents{
padding: 100px 0 30px 0;
}
h1{
margin-bottom: 50px;
font-size: 22px;
}
}
}
/*------------------------------------------
コーンについて
------------------------------------------*/
.aboutContents{
max-width: 730px;
margin: 0 auto;
p{
font-size: 14px;
line-height: 2.5;
&:not(:last-child){
margin-bottom: 2em;
}
}
}
@media screen and (max-width: 768px) {
.aboutContents{
max-width: 730px;
padding: 0 5%;;
margin: 0 auto;
p{
font-size: 14px;
line-height: 2.5;
&:not(:last-child){
margin-bottom: 2em;
}
}
}
}
/*------------------------------------------
アクセサリー
------------------------------------------*/
/*------------------------------------------
アーティスト
------------------------------------------*/
.artistContents{
max-width: 1000px;
margin: 0 auto;
.boxLR{
margin-bottom: 100px;
display: flex;
.boxL{
flex: 1;
}
.boxR{
flex: 1;
margin-left: 50px;
.name_01{
margin-bottom: 10px;
font-size: 18px;
}
.data_01{
margin-bottom: 2em;
font-size: 14px;
}
ul{
margin-bottom: 10px;
li{
&:not(:last-child){
margin-bottom: 1em;
}
}
}
.name_02{
font-weight: 500;
}
.data_02{
font-size: 14px;
}
.exTxt{
font-size: 12px;
}
}
}
.artistsList{
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
li{
min-width: 30%;
max-width: 30%;
margin: 0 5% 50px 0;
flex: 1;
&:nth-child(3n){
margin-right: 0;
}
.imgBox{
margin-bottom: 10px;
}
.name_01{
padding: 0 0 0 10px;
font-size: 18px;
font-weight: 500;
span{
display: block;
font-size: 14px;
}
}
.data_01{
padding: 0 0 0 10px;
font-size: 14px;
}
}
}
}
@media screen and (max-width: 1050px) {
.artistContents{
padding: 0 5%;
}
}
@media screen and (max-width: 768px) {
.artistContents{
.h2_style_01{
margin-bottom: 50px;
}
.boxLR{
margin-bottom: 50px;
display: block;
.boxL{
max-width: 500px;
margin: 0 auto 30px auto;
}
.boxR{
max-width: 500px;
margin: 0 auto;
.name_01{
margin-bottom: 10px;
font-size: 16px;
}
.data_01{
margin-bottom: 2em;
font-size: 12px;
}
.name_02{
font-weight: 500;
}
.data_02{
font-size: 13px;
}
.exTxt{
font-size: 12px;
}
}
}
.artistsList{
max-width: 500px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
li{
min-width: 49%;
max-width: 49%;
margin: 0 2% 50px 0;
flex: 1;
&:nth-child(3n){
margin-right: 2%;
}
&:nth-child(even){
margin-right: 0;
}
.imgBox{
margin-bottom: 10px;
}
.name_01{
padding: 0 0 0 10px;
font-size: 16px;
span{
font-size: 13px;
}
}
.data_01{
padding: 0 0 0 10px;
font-size: 12px;
}
}
}
}
}
/*------------------------------------------
楽器一覧
------------------------------------------*/
.instrumentsListContents{
max-width: 1000px;
margin: 0 auto;
h3{
margin-bottom: 40px;
font-size: 20px;
font-family: 'Noto Serif JP', serif;
font-weight: 300;
span{
position: relative;
&:after{
content: "";
width: 100%;
height: 2px;
background: $subColor;
position: absolute;
left: 0;
bottom: -7px;
}
}
}
>ul,
.boxCol3 .box > ul{
margin-bottom: 80px;
display: flex;
flex-wrap: wrap;
>li{
min-width: 32%;
max-width: 32%;
margin: 0 2% 20px 0;
border-top: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
background: url("../img/instrument/arrow_detail.svg") no-repeat right 5px center;
transition: 0.3s;
&:hover{
background: url("../img/instrument/arrow_detail.svg") no-repeat right 5px center, rgba(77,110,140, 0.2);
}
&:nth-child(3n){
margin-right: 0;
}
a{
height: 100%;
color: #333;
transition: 0.3s;
display: block;
>div{
padding: 20px 20px 20px 10px;
.model{
margin-bottom: 20px;
font-size: 24px;
font-family: 'Noto Serif JP', serif;
font-weight: 300;
}
.exData{
min-height: 1.5rem;
&:empty{
display: none;
}
}
.modelLists{
display: flex;
flex-wrap: wrap;
font-size: 12px;
color: #666;
li{
&:not(:last-child){
&:after{
content: ",";
padding-right: 0.5em;
}
}
}
}
}
}
}
}
.boxCol3{
.box{
min-width: 32%;
max-width: 32%;
margin: 0 2% 0 0;
&:nth-child(3n){
margin-right: 0;
}
>ul{
>li{
min-width: 100%;
max-width: 100%;
}
}
}
}
&.accessories{
>ul{
>li{
a{
>div{
.model{
font-size: 20px;
span{
display: inline-block;
}
}
.exData{
font-size: 14px;
span{
display: inline-block;
}
}
}
}
}
}
}
}
@media screen and (max-width: 1050px) {
.instrumentsListContents{
padding: 0 5%;
}
}
@media screen and (max-width: 768px) {
.instrumentsListContents{
.h2_style_01{
margin-bottom: 50px;
}
h3{
font-size: 18px;
margin-bottom: 40px;
}
>ul{
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
>li{
min-width: 49%;
max-width: 49%;
margin: 0 2% 2% 0;
border: none;
background: url("../img/instrument/arrow_detail.svg") no-repeat right 5px center / 5px auto, rgba(77,110,140, 0.2);
box-shadow: 3px 3px 5px rgba(0,0,0,0.06);
border-radius: 3px;
position: relative;
&:hover{
background: url("../img/instrument/arrow_detail.svg") no-repeat right 5px center / 5px auto, rgba(77,110,140, 0.2);
box-shadow: 0px 0px 5px rgba(0,0,0,0.06);
}
&:nth-child(3n){
margin-right: 2%;
}
&:nth-child(even){
margin-right: 0;
}
a{
>div{
padding: 10px 20px 10px 10px;
.model{
margin-bottom: 10px;
font-size: 20px;
font-family: 'Noto Serif JP', serif;
font-weight: 300;
}
.exData{
font-size: 12px;
min-height: 1.5rem;
}
.modelLists{
font-size: 10px;
}
}
}
}
&.boxCol1{
>li{
min-width: 100%;
max-width: 100%;
}
}
}
}
}
/*------------------------------------------
楽器詳細
------------------------------------------*/
.instrumentsDetailContents{
h1{
>span{
display: block;
font-size: 16px;
>span{
display: inline-block;
}
}
}
.topImg{
padding: 50px 5%;
margin: 0 0 30px 0;
background: #e7e7e7;
text-align: center;
}
.topTxt{
margin-bottom: 100px;
p{
line-height: 2;
&:not(:last-child){
margin-bottom: 1em;
}
}
}
.variationBox{
margin-bottom: 100px;
a{
color: #333;
text-decoration: underline;
&:hover{
text-decoration: none;
}
}
.boxLR{
display: flex;
&:not(:last-child){
margin-bottom: 40px;
padding-bottom: 40px;
}
.imgBox{
max-width: 480px;
flex: 1;
padding: 10px 0;
margin-right: 40px;
border: 1px solid #e7e7e7;
display: flex;
align-items: center;
justify-content: center;
img{
max-width: 95%;
}
}
.txtBox{
max-width: 480px;
flex: 1;
h3{
margin-bottom: 30px;
font-size: 24px;
font-family: 'Noto Serif JP', serif;
font-weight: 300;
line-height: 1.2;
.sTxt{
margin: 10px 0 0 0;
display: block;
font-size: 16px;
}
}
>p{
&:not(:last-child){
margin-bottom: 20px;
line-height: 1.8;
}
}
.price{
padding: 20px;
background: rgba(77,110,140, 0.1);
a{
color: #333;
text-decoration: underline;
&:hover{
text-decoration: none;;
}
}
}
.spec{
padding: 20px;
background: rgba(77,110,140, 0.1);
&:not(:last-child){
margin-bottom: 20px;
}
h3{
margin-bottom: 10px;
}
dl{
display: flex;
line-height: 1.8;
dt{
&:after{
content: "：";
}
}
dd{
flex: 1;
}
}
&.dotList{
dl{
&:not(:last-child){
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted #CCC;
}
}
}
&.fsSmall{
font-size: 14px;
}
}
.specTable{
width: 100%;
&:not(:last-child){
margin-bottom: 20px;
}
thead{
border-bottom: 1px solid #284259;
background: rgba(77,110,140, 0.2);
tr{
th{
padding: 10px;
border-right: 1px solid #CCC;
&:last-child{
border-right: none;
}
}
}
}
tbody{
tr{
td{
padding: 10px;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
&:last-child{
border-right: none;
}
}
&:last-child{
td{
border-bottom: none;
}
}
&:nth-child(even){
td{
background: rgba(77,110,140, 0.1);
}
}
}
}
@media screen and (max-width: 1050px) {
font-size: 12px;
}
}
}
}
}
.feature_specBox{
.feature{
&:not(:last-child){
margin-bottom: 50px;
}
.boxLR,
.box{
display: flex;
&:not(:last-child){
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px dotted #e7e7e7;
}
.imgBox{
max-width: 330px;
margin-right: 40px;
}
.txtBox{
flex: 1;
max-width: 620px;
p{
line-height: 2;
&:not(:last-child){
margin-bottom: 1em;
}
&.exTxt{
padding: 10px;
background: #F7F7F7;
}
}
}
}
.box{
display: block;
.txtBox{
max-width: 100%;
p{
&.exTxt{
padding: 20px;
}
}
}
}
}
.spec{
padding: 20px;
background: rgba(77,110,140, 0.1);
&:not(:last-child){
margin-bottom: 100px;
}
h3{
margin-bottom: 10px;
}
dl{
display: flex;
line-height: 1.8;
dt{
&:after{
content: "：";
}
}
dd{
flex: 1;
}
}
}
}
}
@media screen and (max-width: 1050px) {
.instrumentsDetailContents{
.innerBox_1000{
padding: 0 5%;
}
}
}
@media screen and (max-width: 768px) {
.instrumentsDetailContents{
h1{
margin-bottom: 50px;
>span{
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.topTxt{
p{
font-size: 14px;
}
}
.variationBox{
max-width: 500px;
margin: 0 auto 100px auto;
.boxLR{
display: block;
.imgBox{
max-width: inherit;
margin-right: 0;
img{
max-width: 95%;
}
}
.txtBox{
max-width: inherit;
h3{
padding: 10px 0;
margin-bottom: 0;
font-size: 22px;
}
p{
font-size: 14px;
}
.price{
font-size: 14px;
}
}
}
}
.feature_specBox{
.feature{
&:not(:last-child){
margin-bottom: 50px;
}
.box{
.txtBox{
p.exTxt{
font-size: 14px;
}
}
}
.boxLR{
display: block;
&:not(:last-child){
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dotted #e7e7e7;
}
.imgBox{
max-width: 90%;
margin: 0 auto 20px auto;
text-align: center;
}
.txtBox{
max-width: 500px;
margin: 0 auto;
font-size: 14px;
}
}
}
.spec{
padding: 20px;
dl{
display: block;
font-size: 14px;
&:not(:last-child){
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px dotted #CCC;
}
dt{
font-weight: 700;
}
dd{
flex: 1;
}
}
}
}
}
}
}