@charset "UTF-8";
/* CSS Document */

*{margin:0;padding:0; outline:none;}
html {height:100%; /*overflow:hidden;*/}
body, body p{font-family:"Noto Sans", sans-serif; font-size:10pt; line-height:1.8; letter-spacing:0.02em;}
body {margin:0;padding:0; background:#acaca7; color:#333; text-align:center; scrolling:yes; position:relative; -webkit-text-size-adjust: 100%;}
strong{font-weight:700;}
a, a:visited{color:#FFF; text-decoration:none; overflow:hidden; outline:none;}
a:hover{text-decoration:underline; opacity: 0.8;}

img{border:none; vertical-align: top;}
table{border-collapse:collapse;}
ul{list-style-type:none;}

h1, h2, h3{font-weight:normal; letter-spacing:0.05em;}

.ja{font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif!important;}

/*********** PC ***********/
@media screen and (min-width: 1000px){
    .sp{display:none!important;}
    
    h2{padding: 60px 0 55px; font-size: 18pt; line-height: 1; text-align: center;}
    h3{padding: 0 0 25px; font-size: 15pt; line-height: 1;}
    
    #wrap{overflow: hidden; width: 100%; position: relative;}
    #header{height:90px; width: 100%; background: #FFF; position: fixed; left: 0; top: 0; z-index: 300; display: none;}
    #header p.siteTitle{width:220px; height: 30px; position: absolute; left: 3%; left: calc(3% + 5px); top: 30px;}

    #header ul.menuList{padding: 0 0 0 calc(260px + 5%); text-align: left;}
    #header ul.menuList li{display: inline-block; font-size: 11pt; line-height: 90px; padding: 0 1px; letter-spacing:0.05em; color:#8b8b84;}
    #header ul.menuList li a{color: #CCC; text-decoration: underline;}

    #header ul.langList{position: absolute; width: 60px; line-height: 30px; top: 30px; right: 440px; /*right: 240px;*/}
    #header ul.langList li{display: inline-block; padding: 0; color:#8b8b84;}
    #header ul.langList li a{color: #CCC; text-decoration: underline;}
    #header ul.snsList{position: absolute; width: 100px; top: 30px; right: 130px; text-align: right;}
    #header ul.snsList li{display: inline-block; padding: 0;}
    #header p.corporateBtn{width: 180px; position: absolute; top: 30px; right: 225px;}
    #header p.corporateBtn a{display: block; background: #EEE; color: #8b8b84; line-height: 30px; border-radius: 15px; text-decoration: none;}
    #header p.btn{width: 90px; height: 90px; position: absolute; top: 0; right: 0;}
    @media screen and (max-width: 1150px){
        /*#header ul.menuList{display: none;}*/
    }
.menu {padding: 0 0 0 calc(260px + 5%); text-align: center;}
.menu > li {float: left; width: 12%; line-height: 90px; white-space: nowrap;}
.menu > li a {display: block; color:#8b8b84;}
.menu > li a:hover {color: #8b8b84;}
ul.menu__second-level {visibility: hidden; opacity: 0; z-index: 1;}
ul.menu__third-level {visibility: hidden; opacity: 0;}
ul.menu__fourth-level {visibility: hidden; opacity: 0;}
.menu > li:hover {background: #eef; -webkit-transition: all .5s; transition: all .5s;}
.menu__second-level li {background: #aaa; border-top: 1px solid #fff;}
.menu__third-level li {background: #aaa; border-top: 1px solid #fff;}
.menu__second-level li a{color:#fff;}
.menu__third-level li a{color:#fff;}
.menu__second-level li a:hover {background: #144F6D; color:#fff;}
.menu__third-level li a:hover {background: #173452;}
.menu__fourth-level li a:hover {background: #173452;}
/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 2px 8px;
    border-right: 1px solid #8b8b84;
    border-bottom: 1px solid #8b8b84;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {content: " "; display: table;}
.menu:after {clear: both;}
.menu {*zoom: 1;}
.menu > li.menu__multi {position: relative;}

li.menu__multi ul.menu__second-level {
    position: absolute;
    top: 80px;
    width: 100%;
    background: #CCC;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__multi:hover ul.menu__second-level {top: 90px; visibility: visible; opacity: 1;}
li.menu__multi ul.menu__second-level li {position: relative; line-height: 40px; width: 150%;}
@media screen and (min-width: 1300px){li.menu__multi ul.menu__second-level li {position: relative; line-height: 40px; width: 120%;}}
@media screen and (min-width: 1500px){li.menu__multi ul.menu__second-level li {position: relative; line-height: 40px; width: 100%;}}
li.menu__multi ul.menu__second-level li:hover {background: #144F6D;}
li.menu__multi ul.menu__second-level li ul.menu__third-level {position: absolute; top: -1px; left: 100%; width: 100%; background: #173452; -webkit-transition: all .2s ease; transition: all .2s ease;}
li.menu__multi ul.menu__second-level li:hover ul.menu__third-level {visibility: visible; opacity: 1;}
li.menu__multi ul.menu__second-level li ul.menu__third-level li {position: relative; width: 100%;}
li.menu__multi ul.menu__second-level li ul.menu__third-level li:hover {background: #173452;}
li.menu__multi ul.menu__second-level li ul.menu__third-level li ul.menu__fourth-level {
    position: absolute;
    top: -1px;
    left: 100%;
    width: 100%;
    background: #173452;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;}
li.menu__multi ul.menu__second-level li ul.menu__third-level li:hover ul.menu__fourth-level {visibility: visible; opacity: 1;}
.init-right:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 1px 6px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}


    #content{}
    #footer p{background:#313131; font-size: 8pt; line-height: 1; padding: 20px 0;}
    
    div.seg1{height:90px; position: relative; z-index: 201;}
    div.seg1 ul.menuList{position: absolute; width: 150px; top: 0; right: 540px; /*right: 340px;*/ text-align: right;}
    div.seg1 ul.menuList li{display: inline-block; font-size: 11pt; line-height: 90px; padding: 0 1px; letter-spacing:0.05em;}
    div.seg1 ul.menuList li a{color: #DDD; text-decoration: underline;}
    div.seg1 ul.langList{position: absolute; width: 60px; line-height: 30px; top: 30px; right: 440px; /*right: 240px;*/}
    div.seg1 ul.langList li{display: inline-block; padding: 0;}
    div.seg1 ul.langList li a{color: #DDD; text-decoration: underline;}
    div.seg1 ul.snsList{position: absolute; width: 100px; top: 30px; right: 130px; text-align: right;}
    div.seg1 ul.snsList li{display: inline-block; padding: 0;}
    div.seg1 p.corporateBtn{width: 180px; position: absolute; top: 30px; right: 225px;}
    div.seg1 p.corporateBtn a{display: block; background: rgba(255,255,255,0.15); line-height: 30px; border-radius: 15px; text-decoration: none;}
    div.seg1 p.btn{width: 90px; height: 90px; position: absolute; top: 0; right: 0;}
    
    div.seg2{width: 94%; max-width: 1600px; display: table; margin: 0 auto;}
    div.seg2 div.left{width: 50%; display: table-cell;}
    div.seg2 div.right{width: 50%; display: table-cell; background: #8b8b84; vertical-align: middle;}
    div.seg2 div.right h1 img{max-width: 80%;}
    
    div.seg3{width: 94%; max-width: 1600px; min-height: 700px; display: table; margin: 0 auto 40px;}
    div.seg3 div.left{width: 50%; display: table-cell; background: #222; text-align: left;}
    div.seg3 div.left h2{text-align: left; padding: 70px 10% 50px;}
    div.seg3 div.left p{padding: 0 10% 80px; font-size: 10.5pt; line-height: 2;}
    div.seg3 div.right{width: 50%; display: table-cell; background: url(/img/about_img.jpg) no-repeat center top; background-size: cover; position: relative; z-index: 10;}
    
    div.seg11{width: 90%; max-width: 1600px; margin: 0 auto; background: #FFF; background: rgba(255,255,255,0.8); position: relative; z-index: 10;}
    div.seg11 h2{text-align: left; padding: 70px 5% 50px; color: #222;}
    div.seg11 p{text-align: left; font-size: 10.5pt; line-height: 2; padding: 0 5% 75px; color: #222; display: flex; justify-content: space-between;}
    div.seg11 p span:first-child{width: 48%;}
    div.seg11 p span:last-child{width: 48%;}
    
    div.seg4{margin: 0; position: relative; z-index: 10;}
    div.seg4 ul{display:flex; flex-wrap:wrap; justify-content: center; max-width: 1650px; margin: 0 auto; padding: 0 1.5%;}
    div.seg4 ul li{vertical-align: top; background: #FFF; margin: 0 1.5% 40px; width: 30.33%; position: relative;}
    div.seg4 ul li p.img{padding:0 0 35px;}
    div.seg4 ul li div.inner{padding:20px 7.5% 80px; text-align: left; _zoom:1; overflow: hidden;}
    div.seg4 ul li div.inner h3{color: #222;}
    div.seg4 ul li div.inner p{color: #222; padding: 0 0 20px; font-size: 9.5pt; line-height: 1.6;}
    div.seg4 ul li div.inner p.bottle{float: right; padding: 0 5px 20px 20px;}
    div.seg4 ul li div.inner p.note{color:#999; width: 100%; font-style: italic; border-top: 1px solid #e5e5e4; padding: 25px 0 30px; font-size: 9pt; letter-spacing: 0.02em;}
    @media screen and (max-width: 1130px){
        div.seg4 ul li div.inner{padding:20px 7.5% 170px;}
    }
    
    div.seg6{margin: 0 0 90px;}
    div.seg6 p.lead{margin: -20px 0 70px 0; font-size: 10.5pt; line-height: 1.9;}
    div.seg6 ul{max-width: 1600px; margin: 0 auto; padding: 0 3%; position: relative; z-index: 10;}
    div.seg6 ul li{background: #8b8b84; margin: 0 0 40px; width: 100%; height: 310px; position: relative; display: table;}
    div.seg6 ul li p{line-height: 1.6;}
    div.seg6 ul li p.img{padding:0; width: 33%; display: table-cell;}
    div.seg6 ul li p.imgBottom{padding:0; width: 15%; display: table-cell; vertical-align: bottom; padding: 0 35px 35px 0;}
    div.seg6 ul li div.inner{padding: 40px 25px 30px 35px; text-align: left; display: table-cell; vertical-align: top;}
    div.seg6 ul li div.inner h3{}
    div.seg6 ul li div.inner p{padding: 0 0 20px; font-size: 9.5pt;}
    div.seg6 ul li div.inner div.note{border-top: 1px solid #acaca7; padding: 25px 0 5px; display: flex; width: 100%;}
    div.seg6 ul li div.inner div.note p{color:#DDD; font-style: italic; padding: 0; width: 230px; font-size: 9pt; letter-spacing: 0.02em;}
    div.seg6 ul li div.inner div.note p span.yellow{color: #faff5c; font-style: normal; font-family: serif;}
    div.seg6 ul li div.inner div.note p span.gray{color: #c7c7c4; font-style: normal; font-family: serif;}
    div.seg6 ul li.blockM{}
    div.seg6 ul li.blockM div.imgWrap{width: 50%; display: table-cell; font-size: 0; letter-spacing: 0;}
    div.seg6 ul li.blockM div.imgWrap p{width: 50%; max-width: none; display: inline-block;}
    div.seg6 ul li.blockM div.inner{padding: 40px 35px 0 35px;}
    div.seg6 ul li.blockM div.inner div.note{display: block; padding-bottom: 15px;}
    div.seg6 ul li.blockM div.inner div.note p{padding: 0 0 25px;}
    div.seg6 ul li.blockM p.imgBottom{width: 15%; width: calc(15% - 25px); display: block; position: absolute; right: 35px; bottom: 35px; padding: 0;}
    div.seg6 ul li.blockL{}
    div.seg6 ul li.blockL div.imgWrap{width: 50%; display: table-cell; font-size: 0; letter-spacing: 0;}
    div.seg6 ul li.blockL div.imgWrap p{width: 50%; max-width: none; display: inline-block;}
    div.seg6 ul li.blockL div.inner{padding: 40px 35px 0 35px;}
    div.seg6 ul li.blockL div.inner div.note{display: block; padding-bottom: 15px;}
    div.seg6 ul li.blockL div.inner div.note p{padding: 0 0 25px;}
    div.seg6 ul li.blockL p.imgBottom{width: 15%; width: calc(15% - 25px); display: block; position: absolute; right: 35px; bottom: 35px; padding: 0;}
    
    div.seg7{background: #313131; position: relative;}
    div.seg8{background: #313131; padding: 0 0 90px;}
    
    ul.faceList{width: 94%; max-width: 1600px; display: table; margin: 0 auto; table-layout: fixed; position: relative; z-index: 10;}
    ul.faceList.narrow{width: 47%; max-width: 800px;}
    ul.faceList li{width: 25%; display: table-cell;}
    ul.faceList li p.position{font-size: 9pt; padding: 15px 0 5px;}
    ul.faceList li p.caption{font-size: 9.5pt; padding: 0 5% 20px; text-align: left;}
    ul.faceList li p.link{font-size: 10.5pt; text-align: left; padding: 0 5%;}
    
    div.seg9{padding:0 0 90px;}
    div.seg9 ul.imgList{display: table; width: 100%;}
    div.seg9 ul.imgList li{display: table-cell; width: 25%;}
    
    div.seg10{background: #faff5c;}
    div.seg10 h2, div.seg10 p{color: #000;}
    div.seg10 p.mail{font-size: 24pt; letter-spacing: 0; padding: 100px 0 50px;}
    div.seg10 p.mail a{color: #000; text-decoration: underline;}
    div.seg10 p.ad{border: 2px #111 solid; border-radius: 3px; display: inline-block; margin: 0 0 200px; padding: 10px 60px;}
    
    p.markL{position: fixed; width: 130px; height: 100px; right: 0; bottom: 70px; display: none; z-index: 200;}
    p.line1{width: 400%; height: 1px; position: absolute; border-bottom: 2px solid #faff5c; left: calc(3% - 20px); top: -10px; transform: rotate(53deg); transform-origin: 0% 0%; z-index: 1;}
    p.line2{width: 300%; height: 1px; position: absolute; border-bottom: 2px solid #faff5c; left: -85%; top: 0px; transform: rotate(-53deg); transform-origin: 50% 50%; z-index: 1;}
    @media screen and (min-width: 1702px){
        p.line1{left:calc(50% - 800px - 20px);}
        p.line2{left: -90%;}
    }
    
    .hidden{transition: .6s; transform: translate(0,20px); opacity: 0;}
    .show{transform: translate(0,0); opacity: 1.0;}
    
    /* Crinkle */
    body.crinkle{background: #fff;}
    body.crinkle #header{display: block;}
    body.crinkle #header ul.menuList li{color:#62676b;}
    body.crinkle #header ul.langList li{color:#62676b;}
    body.crinkle #header p.corporateBtn a{color: #62676b;}
    
    body.crinkle div.seg4{margin-bottom: 10px;}
    body.crinkle div.seg4 li p.img:first-child{padding: 0;}
    body.crinkle div.seg4 div.featureWrap{display: flex; justify-content: space-between; padding: 0 0 55px;}
    
    body.crinkle div.seg8{background: #f1f5f3; padding: 0 0 90px;}
    body.crinkle div.seg8 *{color: #393f44;}
    
    body.crinkle ul.faceList{width: 70%; max-width: 1200px;}
    body.crinkle ul.faceList li{width: 33.3%;}
    
    body.crinkle div.seg9{background: #fff;}
    
    body.crinkle div.seg10{background: #8b8b84;}
    body.crinkle div.seg10 h2, body.crinkle div.seg10 p{color: #f2f2f2;}
    body.crinkle div.seg10 p.mail a{color: #f2f2f2;}
    body.crinkle div.seg10 p.ad{border: 2px #f2f2f2 solid;}
    
    body.crinkle div.seg11{background: #f1f5f3; margin-top: 60px; position: relative; z-index: 10;}
    body.crinkle div.seg11 h2{color: #393f44;}
    body.crinkle div.seg11 h2.feature{padding-top: 10px;}
    body.crinkle div.seg11 p{color: #393f44;}
    body.crinkle div.seg11 p.note{padding: 55px 0 60px; border-top: 1px solid #dededd; display: block; color: #999; font-size: 9.5pt; line-height: 1.7;}
    body.crinkle div.seg11 div.inner{padding: 0 5%;}
    body.crinkle div.seg11 div.featureWrap{display: flex; justify-content: space-between; padding: 0 0 55px;}
    body.crinkle div.seg11 div.featureWrap div.block{background: #FFF; width: calc((100% - 90px) / 4); padding: 0 0 40px;}
    body.crinkle div.seg11 div.featureWrap p.img{display: block; padding: 0 0 25px;}
    body.crinkle div.seg11 div.featureWrap h3{color: #222; text-align: left; font-size: 11pt; min-height: 75px; line-height: 1.6; padding: 0 8% 20px;}
    body.crinkle div.seg11 div.featureWrap ul{color: #222; list-style-type: none; padding: 0 8%; font-size: 9.5pt; text-align: left;}
    body.crinkle div.seg11 div.featureWrap ul li{position: relative; padding: 0 0 0 15px;}
    body.crinkle div.seg11 div.featureWrap ul li::before{content: "・"; position: absolute; left: 0; top: 0;}
    
    body.crinkle div.seg21{background: #FFF; padding: 0 0 70px;}
    body.crinkle div.seg21 *{color: #393f44;}
    body.crinkle div.seg21 div.inner{width: 90%; max-width: 1200px; margin: 0 auto; _zoom: 1; overflow: hidden;}
    body.crinkle div.seg21 div.left{float: left; width: 33.3%; text-align: left;}
    body.crinkle div.seg21 div.right{float: right; width: 33.3%;}
    body.crinkle div.seg21 div.block{margin: 0 0 35px;}
    body.crinkle div.seg21 h3{padding: 0 0 10px;}
    body.crinkle div.seg21 h4{margin: 0 0 15px; font-size: 10pt; font-weight: normal;}
    body.crinkle div.seg21 h4 span{border-bottom: 1px solid #393f44;}
    body.crinkle div.seg21 p.en{padding: 0 0 0 15px; position: relative;}
    body.crinkle div.seg21 p.en::before{content: "・"; position: absolute; left: 0; top: 0;}
    body.crinkle div.seg21 dl{width: 100%;}
    body.crinkle div.seg21 dl dt{color: #333; vertical-align: top; text-align: left; font-weight: bold;}
    body.crinkle div.seg21 dl dt a{color: #333; text-align: left; font-size: 8pt; font-weight: normal; margin-left: 1em;}
    body.crinkle div.seg21 dl dd{color: #AAA; vertical-align: top; text-align: left; font-weight: normal; font-size: 8pt; margin: 0 0 10px 10px; width: 90%;}
    
    body.crinkle div.seg22{margin: 90px 0 0; position: relative;}
    body.crinkle div.seg22 ul.imgList,
    body.crinkle div.seg22 ul.imgList li{position: absolute; width: 100%; left: 0; top: 0;}
    body.crinkle div.seg22 ul.imgList li{opacity: 0; transition: opacity 1.2s ease;}
    body.crinkle div.seg22 ul.imgList li.on{opacity: 1;}
    body.crinkle div.seg22 ul.markList{position: absolute; width: 6px; height: 100%; right: 17px; top: 0; display: flex; flex-wrap: wrap; align-content: center;}
    body.crinkle div.seg22 ul.markList li{width: 6px; height: 6px; background: #FFF; border-radius: 50%; cursor: pointer; margin: 7px 0;}
    body.crinkle div.seg22 ul.markList li.on{background: #585d61;}
    
    
    body.crinkle div.seg30{background: #FFF; padding: 0 0 70px;}
    body.crinkle div.seg30 *{color: #393f44;}
    body.crinkle div.seg30 div.inner{width: 90%; max-width: 1200px; margin: 0 auto; _zoom: 1; overflow: hidden;}
    /*タブ切り替え全体のスタイル*/
    body.crinkle div.seg30 .tabs {margin-top: 50px; padding-bottom: 40px; background-color: #fff; width:80%; margin: 0 auto;}
    /*タブのスタイル*/
    body.crinkle div.seg30 .tab_item {width: calc(100%/4); height: 50px; border-bottom: 3px solid #cbd83f; background-color: #d9d9d9; border-radius: 10px 10px 0px 0px; line-height: 50px; font-size: 1.1em; text-align: center; color: #565656; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease;}
    body.crinkle div.seg30 .tab_item:hover {opacity: 0.75;}
    /*ラジオボタンを全て消す*/
    body.crinkle div.seg30 input[name="tab_item"] {display: none;}
    /*タブ切り替えの中身のスタイル*/
    body.crinkle div.seg30 .tab_content {display: none; padding: 10px 5px 0; clear: both; height: 200px; overflow-y:scroll; overflow-x:hidden;}
    body.crinkle div.seg30 .tab_content dl {display: block; padding-left: 5px; color: #393f44; border-bottom: 1px dashed #ddd; text-align:left;}
    body.crinkle div.seg30 .tab_content dt {clear: left; float: left; width: 14%; padding: 5px 0px;}
    body.crinkle div.seg30 .tab_content dd {margin-left: 15%; padding: 5px 0px;}
    body.crinkle div.seg30 .tab_content dd p{float: left; width: 8%;
margin-right: 7%; padding: 0px 7px; background-color: #a0a0a0; line-height: 1.5em; font-size: 0.6em; text-align: center; vertical-align: middle; color: #fff; font-weight: bold;}
    body.crinkle div.seg30 .tab_content dd span{font-size:0.8em;}
    /*選択されているタブのコンテンツのみを表示*/
    body.crinkle div.seg30 #all:checked ~ #all_content,#popup:checked ~ #popup_content,#exhibition:checked ~ #exhibition_content,#others:checked ~ #others_content {display: block;}
    /*選択されているタブのスタイルを変える*/
    body.crinkle div.seg30 .tabs input:checked + .tab_item {background-color: #cbd83f; color: #fff;}


    
    body.crinkle #footer p{background:#51565a; color: #f2f2f2;}
    
}

@media screen and (max-width: 1180px){
    body.crinkle div.seg11 div.featureWrap h3 br{display: none;}
}

/*********** SP ***********/
@media screen and (max-width: 999px){
    .pc{display:none!important;}
    
    body, body p{letter-spacing:0.02em;}
    
    a:hover{text-decoration:none; opacity: 1;}
        
    h2{padding: 30px 0 30px; font-size: 15pt; line-height: 1.4; text-align: center;}
    h3{padding: 0 0 20px; font-size: 13pt; line-height: 1.4;}
    
    #wrap{overflow: hidden; width: 100%; position: relative;}
    #header{display: none!important;}
    #content{}
    #footer p{background:#313131; font-size: 8pt; line-height: 1.5; padding: 15px 0;}
    
    div.seg1{height:60px; width: 100%; background: #8b8b84;}
    div.seg1 h1{text-align: left; padding: 0 0 0 7.5%; display: block; height: 100%;}
    @media screen and (min-width: 700px){
        div.seg1 h1{text-align: center; padding: 0 0 0 0;}
    }
    div.seg1 p.btn{width: 60px; height: 60px; top: 0; right: 0; position: fixed; z-index: 201;}
    
    div.seg2{width: 90%; max-width: 600px; margin: 0 auto; padding: 20px 0 0 0;}
    div.seg2 div.left{}
    
    div.seg3{width: 90%; max-width: 600px; margin: 0 auto 30px; position: relative; z-index: 10;}
    div.seg3 div.left{background: #222; text-align: left;}
    div.seg3 div.left h2{text-align: left; padding: 35px 7.5% 25px;}
    div.seg3 div.left p{padding: 0 7.5% 40px;}
    div.seg3 div.right{height:380px; background: url(/img/about_img.jpg) no-repeat center top; background-size: cover; position: relative; z-index: 10;}
    @media screen and (min-width: 550px){
        div.seg3 div.right{height:600px;}
    }
    
    div.seg11{width: 90%; max-width: 600px; margin: 0 auto; background: #FFF; background: rgba(255,255,255,0.8); position: relative; z-index: 10;}
    div.seg11 h2{text-align: left; padding: 35px 8.5% 25px; color: #222;}
    div.seg11 p{text-align: left; padding: 0 7.5% 35px; color: #222; }
    div.seg11 p span:first-child{width: 100%; display: block; padding: 0px;}
    div.seg11 p span:last-child{width: 100%; display: block; padding: 30px 0 10px 0px;}
    
    div.seg4{margin: 0 0 -30px; position: relative; z-index: 10;}
    div.seg4 ul{width:90%; max-width: 600px; margin: 0 auto;}
    div.seg4 ul li{background: #FFF; margin: 0 0 30px;}
    div.seg4 ul li p.img{padding:0 0 25px;}
    div.seg4 ul li p.img:first-child{padding:0;}
    div.seg4 ul li div.inner{padding:20px 7.5%; text-align: left;}
    div.seg4 ul li div.inner h3{color: #222;}
    div.seg4 ul li div.inner p{color: #222; padding: 0 0 25px; font-size: 9pt;}
    div.seg4 ul li div.inner p.note{color:#999; font-style: italic; border-top: 1px solid #e5e5e4; padding: 20px 0 30px;}
    
    div.seg6{margin: 0; padding: 0 0 20px; position: relative; z-index: 10;}
    div.seg6 p.lead{margin: -10px 5% 30px;}
    div.seg6 ul{width:90%; max-width: 600px; margin: 0 auto;}
    div.seg6 ul li{background: #8b8b84; margin: 0 0 30px;}
    div.seg6 ul li p.img{padding:0 0 25px;}
    div.seg6 ul li div.inner{padding:0 7.5% 5px; text-align: left;}
    div.seg6 ul li div.inner h3{}
    div.seg6 ul li div.inner p{padding: 0 0 25px; font-size: 9pt;}
    div.seg6 ul li div.inner div.note{border-top: 1px solid #acaca7; padding: 20px 0 10px;}
    div.seg6 ul li div.inner div.note p{color:#DDD; font-style: italic; padding: 0 0 20px;}
    div.seg6 ul li div.inner div.note p span.yellow{color: #faff5c; font-style: normal; font-family: serif;}
    div.seg6 ul li div.inner div.note p span.gray{color: #c7c7c4; font-style: normal; font-family: serif;}
    div.seg6 ul li.blockM p.img{padding:0;}
    div.seg6 ul li.blockM p.img:last-child{padding:0 0 25px;}
    div.seg6 ul li.blockL p.img{padding:0;}
    div.seg6 ul li.blockL p.img:last-child{padding:0 0 25px;}
    
    div.seg7{background: #313131; position: relative; width: 100%;}
    div.seg8{background: #313131; padding: 0 0 30px;}
    
    ul.faceList{width: 90%; max-width: 600px; margin: 0 auto -15px; position: relative; z-index: 10; _zoom:1; overflow: hidden;}
    ul.faceList li{width: 50%; float: left; padding: 0 0 15px;}
    ul.faceList li p.position{font-size: 9pt; padding: 10px 0 5px;}
    ul.faceList li p.caption{font-size: 9.5pt; padding: 0 5% 20px; text-align: left;}
    ul.faceList li p.link{font-size: 10.5pt; text-align: left; padding: 0 5%;}
    ul.faceList.narrow{}
    ul.faceList.narrow li{float: none; width: 100%; padding: 0 0 35px;}
    ul.faceList.narrow li p.img{width: 50%; margin: 0 auto;}
    ul.faceList.narrow li p.caption{padding: 0 5% 20px;}
    ul.faceList.narrow li p.link{padding: 0 5%;}
    
    div.seg9{padding:0 0 60px;}
    div.seg9 ul.imgList{width: 100%; _zoom:1; overflow: hidden;}
    div.seg9 ul.imgList li{width: 50%; float: left;}
    div.seg9 div.fb-page{display: none;}
    div.seg9 a.fbLink{display: block; border: 2px solid #EEE; width: 80%; padding: 10px 0; margin: 0 auto;}
    
    div.seg10{background: #faff5c;}
    div.seg10 h2, div.seg10 p{color: #000;}
    div.seg10 p.mail{font-size: 18pt; letter-spacing: 0; padding: 60px 0 40px;}
    div.seg10 p.mail a{color: #000; text-decoration: underline;}
    div.seg10 p.ad{border: 2px #111 solid; border-radius: 3px; display: inline-block; margin: 0 0 110px; padding: 10px 5%; width: 80%;}
    
    p.markL{position: fixed; width: 90px; height: 70px; left: 0; bottom: 40px; display: none; z-index: 200;}
    p.markL img{width: 90px; height: 70px;}
    p.line1{width: 400%; height: 1px; position: absolute; border-bottom: 2px solid #faff5c; left: -200%; top: 110px; transform: rotate(43deg); transform-origin: 50% 50%; z-index: 1;}
    p.line2{width: 300%; height: 1px; position: absolute; border-bottom: 2px solid #faff5c; left: -60%; top: 0px; transform: rotate(-43deg); transform-origin: 50% 50%; z-index: 1;}
    @media screen and (min-width: 667px){
        p.line1{left:calc(-200% + (50% - 333px));}
        p.line2{left:-70%;}
    }
    

    
    #spMenu{}
    #spMenu div.inner{width: 100%; height: 100%; position: fixed; left: 100%; top: 0; z-index: 300;}
    #spMenu div.inner p.bg{display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0;background: #222; background: rgba(34,34,34,0.8); z-index: 5;}
    #spMenu div.inner div.naviWrap{width: 80%; height: 100%; right: 0; top: 0; position: absolute; z-index: 10; background: #8b8b84;}
    #spMenu div.inner div.naviWrap ul.langList{line-height: 60px; z-index: 9; position: relative;}
    #spMenu div.inner div.naviWrap ul.langList li{display: inline-block; padding: 0;}
    #spMenu div.inner div.naviWrap ul.langList li a{color: #DDD; text-decoration: underline;}
    #spMenu div.inner div.naviWrap ul.menuList{background: #585d61; position: absolute; width: 100%; left: 0; top: 60px;}
    #spMenu div.inner div.naviWrap ul.menuList li{display: block; background: #585d61; letter-spacing: 0.05em; font-size: 11pt; line-height: 40px; position: relative; border-top: 1px solid #8b8b84;}
    #spMenu div.inner div.naviWrap ul.menuList li.no{display: block; background: #8b8b84; color: #DDD; letter-spacing: 0.05em; font-size: 11pt; line-height: 25px; position: relative; border-bottom: 1px solid #8b8b84;}
    #spMenu div.inner div.naviWrap ul.menuList li.inline{display: inline-block; background: #585d61; width: 49%; margin: 0; padding: 0 0.1%; letter-spacing: 0.05em; font-size: 11pt; line-height: 40px; position: relative; border: none; }
    #spMenu div.inner div.naviWrap ul.menuList li:last-child::before{content: ""; width: 14px; left: 0; top: 0; right: 0; margin: 0 auto; border: none; position: absolute;}
    #spMenu div.inner div.naviWrap ul.menuList li a{color: #DDD; text-decoration: none;}
    
    #spMenu div.inner div.naviWrap ul.snsList{position: absolute; width: 100%; height: 30px; left: 0; bottom: 140px;}
    #spMenu div.inner div.naviWrap ul.snsList li{display: inline-block; padding: 0 2px;}
    
    #spMenu div.inner div.naviWrap p.btnClose{position: absolute; width: 60px; height: 60px; right: 0; top: 0; z-index: 10; cursor: pointer;}
    #spMenu div.inner div.naviWrap p.ecBtn{position: absolute; width: calc(100% - 20px); left: 10px; bottom: 70px; z-index: 10;}
    #spMenu div.inner div.naviWrap p.ecBtn a{display: block; background: #585d61; line-height: 60px;}
    #spMenu div.inner div.naviWrap p.ecBtn span{padding: 20px 15px 20px 40px; background: url(/img/menu_ec_sp.svg) no-repeat left center; background-size: 30px 30px;}
    #spMenu div.inner div.naviWrap p.corporateBtn{position: absolute; width: calc(100% - 20px); left: 10px; bottom: 10px; z-index: 10;}
    #spMenu div.inner div.naviWrap p.corporateBtn a{display: block; background: rgba(0,0,0,0.15); line-height: 60px;}
    
    .hidden{transition: .6s; transform: translate(0,20px); opacity: 0;}
    .show{transform: translate(0,0); opacity: 1.0;}
    
    /* Crinkle */
    body.crinkle{background: #FFF;}
    
    body.crinkle div.seg1{height:60px; width: 100%; background: #FFF;}
    
    body.crinkle div.seg4{margin-bottom: 40px;}
    body.crinkle div.seg4 li.hidden p.img:first-child{padding: 0;}
    
    body.crinkle div.seg8{background: #f1f5f3; padding: 0 0 30px;}
    body.crinkle div.seg8 *{color: #393f44;}
    
    body.crinkle ul.faceList{width: 90%; max-width: 600px;}
    body.crinkle ul.faceList li{width: 100%; padding: 0 0 30px;}
    body.crinkle ul.faceList li p.img{padding-left: 25%; padding-right: 25%;}
    
    body.crinkle div.seg9{background: #fff;}
    body.crinkle div.seg9 ul.imgList li{float: none; width: 100%;}
    
    body.crinkle div.seg10{background: #8b8b84;}
    body.crinkle div.seg10 h2, body.crinkle div.seg10 p{color: #f2f2f2;}
    body.crinkle div.seg10 p.mail a{color: #f2f2f2;}
    body.crinkle div.seg10 p.ad{border: 2px #f2f2f2 solid;}
    
    body.crinkle div.seg11{background: #f1f5f3; margin-top: 20px; position: relative; z-index: 10;}
    body.crinkle div.seg11 h2{color: #393f44;}
    body.crinkle div.seg11 h2.feature{padding-top: 10px;}
    body.crinkle div.seg11 p{color: #393f44;}
    body.crinkle div.seg11 p.note{padding: 30px 0 35px; border-top: 1px solid #dededd; display: block; color: #999; font-size: 9.5pt; line-height: 1.7;}
    body.crinkle div.seg11 div.inner{padding: 0 7.5%;}
    body.crinkle div.seg11 div.featureWrap{padding: 0 0 20px;}
    body.crinkle div.seg11 div.featureWrap div.block{background: #FFF; margin: 0 0 20px; padding: 0 0 30px;}
    body.crinkle div.seg11 div.featureWrap p.img{display: block; padding: 0 0 25px;}
    body.crinkle div.seg11 div.featureWrap h3{color: #222; text-align: left; font-size: 11pt; line-height: 1.6; padding: 0 7% 20px;}
    body.crinkle div.seg11 div.featureWrap ul{color: #222; list-style-type: none; padding: 0 7%; font-size: 9.5pt; text-align: left;}
    body.crinkle div.seg11 div.featureWrap ul li{position: relative; padding: 0 0 0 15px;}
    body.crinkle div.seg11 div.featureWrap ul li::before{content: "・"; position: absolute; left: 0; top: 0;}
    
    body.crinkle div.seg21{background: #FFF; padding: 0 0 30px;}
    body.crinkle div.seg21 *{color: #393f44;}
    body.crinkle div.seg21 div.inner{width: 90%; max-width: 600px; margin: 0 auto; _zoom: 1; overflow: hidden;}
    body.crinkle div.seg21 div.left{text-align: left; padding: 0 5%;}
    body.crinkle div.seg21 div.right{padding: 0 25% 30px;}
    body.crinkle div.seg21 div.block{margin: 0 0 30px;}
    body.crinkle div.seg21 h3{padding: 0 0 10px; font-weight: bold; border-bottom: 1px solid #393f44;}
    body.crinkle div.seg21 h4{margin: 0 0 20px; font-size: 10pt; font-weight: bold;}
    body.crinkle div.seg21 h4 span{border-bottom: 1px solid #393f44;}
    body.crinkle div.seg21 p.en{padding: 0 0 0 15px; position: relative;}
    body.crinkle div.seg21 p.en::before{content: "・"; position: absolute; left: 0; top: 0;}
    body.crinkle div.seg21 dl{width: 100%;}
    body.crinkle div.seg21 dl dt{color: #333; vertical-align: top; text-align: left; font-weight: bold;}
    body.crinkle div.seg21 dl dt a{color: #333; text-align: left; font-size: 8pt; font-weight: normal; margin-left: 1em;}
    body.crinkle div.seg21 dl dd{color: #AAA; vertical-align: top; text-align: left; font-weight: normal; font-size: 8pt; margin: 0 0 10px 10px; width: 90%;}
    
    body.crinkle div.seg22{margin: 0 0 0; position: relative;}
    body.crinkle div.seg22 ul.imgList,
    body.crinkle div.seg22 ul.imgList li{position: absolute; width: 100%; left: 0; top: 0;}
    body.crinkle div.seg22 ul.imgList li{opacity: 0; transition: opacity 1.2s ease;}
    body.crinkle div.seg22 ul.imgList li.on{opacity: 1;}
    body.crinkle div.seg22 ul.markList{position: absolute; width: 100%; height: 6px; right: 15px; bottom: 50px; display: flex; justify-content: flex-end;}
    body.crinkle div.seg22 ul.markList li{width: 6px; height: 6px; background: #FFF; border-radius: 50%; cursor: pointer; margin: 0 0 0 9px;}
    body.crinkle div.seg22 ul.markList li.on{background: #585d61;}
    
    body.crinkle div.seg30{background: #FFF; padding: 0 0 40px;}
    body.crinkle div.seg30 *{color: #393f44;}
    body.crinkle div.seg30 div.inner{width: 90%; max-width: 1200px; margin: 0 auto; _zoom: 1; overflow: hidden;}
    /*タブ切り替え全体のスタイル*/
    body.crinkle div.seg30 .tabs {margin-top: 50px; padding-bottom: 40px; background-color: #fff; width:100%; margin: 0 auto;}
    /*タブのスタイル*/
    body.crinkle div.seg30 .tab_item {width: calc(100%/4); height: 50px; border-bottom: 3px solid #cbd83f; background-color: #d9d9d9; line-height: 50px; font-size: 0.8em; text-align: center; color: #565656; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease;}
    body.crinkle div.seg30 .tab_item:hover {opacity: 0.75;}
    /*ラジオボタンを全て消す*/
    body.crinkle div.seg30 input[name="tab_item"] {display: none;}
    /*タブ切り替えの中身のスタイル*/
    body.crinkle div.seg30 .tab_content {display: none; padding: 10px 5px 0; clear: both; height: 250px; overflow-y:scroll; overflow-x:hidden;}
    body.crinkle div.seg30 .tab_content dl {display: block; padding-left: 5px; color: #393f44; border-bottom: 1px dashed #ddd; text-align:left;}
    body.crinkle div.seg30 .tab_content dt {padding: 5px 0px 0px 0px;}
    body.crinkle div.seg30 .tab_content dd {margin-left: 2%; padding: 5px 0px;}
    body.crinkle div.seg30 .tab_content dd p{display: inline-block; margin-right: 2% ;padding: 0px 7px; background-color: #a0a0a0; line-height: 1.5em; font-size: 0.6em; text-align: center; color: #fff; font-weight: bold;}
    body.crinkle div.seg30 .tab_content dd span{font-size:0.8em;}
    /*選択されているタブのコンテンツのみを表示*/
    body.crinkle div.seg30 #all:checked ~ #all_content,#popup:checked ~ #popup_content,#exhibition:checked ~ #exhibition_content,#others:checked ~ #others_content {display: block;}
    /*選択されているタブのスタイルを変える*/
    body.crinkle div.seg30 .tabs input:checked + .tab_item {background-color: #cbd83f; color: #fff;}

    body.crinkle #footer p{background:#51565a; color: #f2f2f2;}
    
    #spMenu.crinkle div.inner div.naviWrap{background: #8b8b84;}
    
}

/*その他*/
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden;}
.clearfix{display: inline-block;}
.clear{clear:both; margin:0; padding:0;}

.aligncenter{text-align:center!important;}
.alignleft{text-align:left;}
.alignright{text-align:right;}

.flLeft{float:left; padding:0 25px 25px 0;}
.flRight{float:right; padding:0 0 25px 25px;}

.margin0{padding:0!important;;}
.margin5{padding:0 0 5px 0!important;;}
.margin10{padding:0 0 10px 0!important;}
.margin15{padding:0 0 15px 0!important;}
.margin20{padding:0 0 20px 0!important;;}
.margin25{padding:0 0 25px 0!important;;}
.margin30{padding:0 0 30px 0!important;;}
.margin35{padding:0 0 35px 0!important;;}
.margin40{padding:0 0 40px 0!important;;}
.margin45{padding:0 0 45px 0!important;;}
.margin50{padding:0 0 50px 0!important;}
.margin60{padding:0 0 60px 0!important;;}
.margin65{padding:0 0 65px 0!important;;}
.margin70{padding:0 0 70px 0!important;;}
.margin75{padding:0 0 75px 0!important;;}


.btn-border {
  display: inline-block;
  width: 30%;
  max-width: 180px;
  text-align: center;
  background-color: #8B8B84;
  border: 0px;
  font-size: 16px;
  color: #f2f2f2;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  transition: .4s;
}

.btn-border:hover {
  background-color: #ddf;
  border: 0px;
  color: #4b4b44;
}


.instacon {margin: 0 auto; padding: 5px; width: 100%; background-color: #f1f5f3;}

.instafeed {padding-bottom: 30px; column-count: 6; width: 90%; max-width: 1200px; margin: 0 auto; _zoom: 1; overflow: hidden;}

@media (max-width: 1000px) {.instafeed {column-count: 4;}}
@media (max-width: 480px) {.instafeed {column-count: 3;}}

.instafeed > div {padding: 10px;}
.instaimg {width: 100%; height:160px; vertical-align: top; -webkit-border-radius: 10px; -moz-border-radius: 10px; object-fit: cover;}

/*YouTubeレスポンシブサイズ*/
.youtube-wrapper {max-width: 960px;width: 100%;margin: 0 auto;}
.youtube-container {position: relative;display: block;width: 100%;padding: 0;overflow: hidden;padding-top: calc(9 / 16 * 100%);}
.youtube-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.video-container .video {position: inherit;padding-bottom: 0;margin-top: 0;height: auto;overflow: auto;max-width: none;}