@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
/* mv */
#mv .tit-box h1{ font-weight: 500; line-height: 1.3; color: #fff; letter-spacing: 0.12em;}
#mv .tit-box h1 span{ border: 1px solid #fff; font-weight: 700; color: #fff; letter-spacing: 0.2em; display: inline-block;}
#mv .tit-box .read{ font-weight: 800; color: #fff; letter-spacing: 0.2em; display: inline-block;}

/* contents */
#contents{ position: relative;}
.list-box{ position: absolute; z-index: 5;}
.list-box a{ text-decoration: none;}
.list-box h2{ font-weight: 700; color: #fff; letter-spacing: 0.1em;}
.list-box p{ font-weight: 500; color: #fff; letter-spacing: 0.07em;}
.list-box .t-link span{ border-bottom: 1px solid #fff;}
.list-box .t-link span p{ color: #fff;}
#g-nav ul li a{ color: #000; text-decoration: none; display: block; position: relative;}
#g-nav ul li.new a::after{ content: "NEW"; background: #009844; color: #fff; position: absolute; padding: 1px 2px 2px;}
#g-nav ul li.special a{ background: url(../img/nav-special.svg) left center no-repeat;}
#g-nav ul li.impression a{ background: url(../img/nav-impression.svg) left center no-repeat;}
#g-nav ul li.story a{ background: url(../img/nav-story.svg) left center no-repeat;}
#g-nav ul li.movie a{ background: url(../img/nav-movie.svg) left center no-repeat;}
#g-nav ul li.news a{ background: url(../img/nav-news.svg) left center no-repeat;}
#g-nav ul li a p{ font-weight: 400;}
#g-nav ul li a p.en{ letter-spacing: 0.07em;}
.tit-box .tit{ flex-shrink: 0;}
.tit-box .tit .en{ font-weight: 400; letter-spacing: 0.07em;}
.tit-box .tit h2{ font-weight: 700; color: #009844;}
#special .tit-box{ display: flex;}
#special .tit-box::after{ content: ""; background: #D9D9D9; width: 100%; height: 1px;}
.special-list li{ border-bottom: 1px solid #D9D9D9;}
.special-list li a{ display: flex; align-items: center; flex-direction: row-reverse; text-decoration: none;}
.special-list li a .img{ flex-shrink: 0;}
.special-list li a .detail p{ font-weight: 700; line-height: 1.6; color: #000;}
.special-list li a .detail p.data{ color: #009844;}
.special-list li:first-child{ border-bottom: none;}
.special-list li:first-child a{ display: block;}
.special-list li:first-child a .img{ width: 100%;}
.special-list li:first-child a .detail{ background: #000; width: 100%;}
.special-list li:first-child a .detail p{ color: #fff;}
.special-list li:first-child a .detail p.data{ color: #009844;}
#impression .tit-box{ display: flex;}
#impression .tit-box::after{ content: ""; background: #D9D9D9; width: 100%; height: 1px;}
.impression-list li a{ display: block; text-decoration: none;}
.impression-list li a .detail{ background: #000;}
.impression-list li a .detail p{ font-weight: 700; line-height: 1.6; color: #fff;}
.impression-list li a .detail p.data{ font-weight: 400;}
#story .inner::before{ content: ""; background: url(../../img/story-decoration01.png) center center no-repeat; background-size: 100%; position: absolute; z-index: 0;}
#story .inner::after{ content: ""; background: url(../../img/story-decoration02.png) center center no-repeat; background-size: 100%; position: absolute; z-index: 0;}
#story .tit-box{ display: flex;}
#story .tit-box::after{ content: ""; background: #D9D9D9; width: 100%; height: 1px;}
.story-box{ position: relative; z-index: 1;}
.story-box .detail h3{ font-weight: 400; letter-spacing: 0.07em;}
.story-box .detail .sub{ font-weight: 400; letter-spacing: 0.19em; position: relative;}
.story-box .detail .sub::after{ content: ""; background: #009844; height: 1px; position: absolute; left: 0;}
.story-box .detail .read{ font-weight: 400; line-height: 2.0; letter-spacing: 0.07em;}
.story-box .img-box{ position: relative;}
.story-box .img-box .img02{ text-align: right;}
.story-box .img-box p{ font-weight: 400; letter-spacing: 0.1em; position: absolute; transform: rotate(90deg);}
.story-list{ position: relative; z-index: 1;}
.story-list li a{ display: block; text-decoration: none;}
.story-list li a .detail{ background: #000;}
.story-list li a .detail p{ font-weight: 700; line-height: 1.6; color: #fff;}
.story-list li a .detail p.data{ font-weight: 400;}
#movie .tit .en{ color: #fff;}
.movie-list li a{ display: block; text-decoration: none;}
.movie-list li a .detail{ background: #000;}
.movie-list li a .detail p{ font-weight: 700; line-height: 1.6; color: #fff;}
#movie .t-link > a{ border-bottom: 1px solid #fff;}
#movie .t-link > a p{ color: #fff;}
.news-list li a{ display: flex; align-items: center; text-decoration: none;}
.news-list li a .img{ flex-shrink: 0;}
.news-list li a .detail p{ font-weight: 700; line-height: 1.6; color: #000;}
.news-list li a .detail p.data{ font-weight: 700; color: #888A97;}
.news-list li a .arrow{ background: url(../img/arrowR-green.svg?260520-03) center center no-repeat; border: 2px solid #009844; border-radius: 60px;}
.qa-list{ border-top: 1px solid #D9D9D9;}
.qa-list dt{ border-bottom: 1px solid #D9D9D9; display: flex; align-items: start; cursor: pointer;}
.qa-list dt .en{ border: 1px solid #009844; color: #009844; text-align: center; border-radius: 100%; flex-shrink: 0;}
.qa-list dt .close{ display: none;}
.qa-list dt.ac .open{ display: none;}
.qa-list dt.ac .close{ display: block;}
.qa-list dt .plus-minus{ font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; border: 2px solid #009844; border-radius: 60px; flex-shrink: 0;}
.qa-list dt .plus-minus span{ font-weight: 400; color: #009844; position: relative;}
.qa-list dd{ border-bottom: 1px solid #D9D9D9; display: flex; align-items: start;}
.qa-list dd .en{ border: 1px solid #000; color: #000; text-align: center; border-radius: 100%; flex-shrink: 0;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
/* mv */
#mv{ background: #000 url(../../img/mv-img01_pc.jpg) center top no-repeat; background-size: cover; height: 700px;}
#mv .tit-box{ margin-top: 134px;}
#mv .tit-box h1{ font-size: 74px; margin-bottom: 30px;}
#mv .tit-box h1 span{ font-size: 20px; padding: 12px 30px; margin-bottom: 30px;}
#mv .tit-box .read{ font-size: 16px; line-height: 1.7;}

/* contents */
#contents{ background: url(../../img/bg_pc.jpg) center top repeat-y; background-size: 100%; padding: 160px 0 150px;}
.list-box{ background: url(../../img/list-bg_pc.jpg) center top no-repeat; background-size: 100%; border-bottom: 4px solid #009844; width: 896px; top: -70px; left: 50%; transform: translateX(-50%);}
.list-box a{ display: flex; align-items: center; padding: 35px 40px 35px;}
.list-box .detail{ margin-right: auto;}
.list-box .detail h2{ font-size: 26px; margin-bottom: 14px;}
.list-box .detail p{ font-size: 16px;}
.list-box a:hover .t-link .arrow{ background: #009844 url(../img/arrowR-white.svg?260520-03) center center no-repeat; background-size: 12px; border: 2px solid #009844;}
#g-nav{ width: 1040px; margin: 0 auto 100px;}
#g-nav ul{ display: flex;}
#g-nav ul li{ position: relative; margin-right: auto;}
#g-nav ul li::after{ content: ""; background: #7A7A7A; width: 1px; height: 70px; position: absolute; right: -38px; top: -4px; transform: rotate(30deg);}
#g-nav ul li:last-child:after{ content: none;}
#g-nav ul li:last-child{ margin-right: 0;}
#g-nav ul li a{ transition: .6s; padding: 14px 0 14px 52px;}
#g-nav ul li a:hover{ opacity: 0.6;}
#g-nav ul li.new a::after{ font-size: 11px; left: 52px; top: -4px;}
#g-nav ul li.news a{ padding-left: 42px;}
#g-nav ul li.news.new a::after{ left: 42px;}
#g-nav ul li a p{ font-size: 12px;}
#g-nav ul li a p.en{ font-size: 17px; margin-bottom: 5px;}
.tit-box{ margin-bottom: 50px;}
.tit-box .tit .en{ font-size: 26px; margin-bottom: 6px;}
.tit-box .tit h2{ font-size: 16px;}
#special{ margin-bottom: 65px;}
#special .tit-box::after{ margin: 12px 0 0 50px;}
.special-list{ display: flex; flex-wrap: wrap; position: relative;}
.special-list li{ width: 526px;}
.special-list li a{ transition: .4s;}
.special-list li a:hover{ opacity: 0.8;}
.special-list li a .img{ width: 250px;}
.special-list li a .img img{ width: 100%;}
.special-list li a .detail{ width: 250px; flex-shrink: 0; padding-left: 35px; margin-right: auto;}
.special-list li a .detail p{ font-size: 14px;}
.special-list li a .detail p.data{ margin-top: 18px;}
.special-list li:first-child{ width: 590px; margin-right: 580px !important;}
.special-list li:first-child a .img{ height: 286px; overflow: hidden; position: relative;}
.special-list li:first-child a .img img{ position: absolute; top: 50%; transform: translateY(-50%);}
.special-list li:first-child a .detail{ display: flex; padding: 25px;}
.special-list li:first-child a .detail .data{ margin: 0 0 0 auto;}
/* デザインに合わせる為の強引なcss */
.special-list li:nth-child(n+3){ margin-bottom: 24px;}
.special-list li:last-child,
.special-list li:nth-last-child(2){ margin-bottom: 0;}
.special-list li:nth-child(even){ position: relative; margin-right: auto;}
.special-list li:nth-child(even)::after{ content: ""; background: #D9D9D9; width: 1px; height: calc(100% + 25px); position: absolute; top: 0px; right: -65px;}
.special-list li:last-child::after,
.special-list li:nth-last-child(2)::after{ height: 100% !important;}
.special-list li:nth-child(2){ position: absolute; right: 0px; top: 0;}
.special-list li:nth-child(2)::after{ content: none !important;}
.special-list li:nth-child(3){ position: absolute; right: 0px; top: 192px;}
.special-list li:nth-child(4),
.special-list li:nth-child(5){ margin-top: 80px;}
#special .t-link{ margin: 35px 0 0 auto;}
#impression{ margin-bottom: 90px;}
#impression .tit-box::after{ margin: 12px 0 0 50px;}
.impression-list{ display: flex; flex-wrap: wrap;}
.impression-list li{ width: 374px; margin: 0 24px 30px 0;}
.impression-list li:nth-child(3n){ margin-right: 0;}
.impression-list li a{ transition: .4s;}
.impression-list li a:hover{ opacity: 0.8;}
.impression-list li a .img img{ width: 100%;}
.impression-list li a .detail{ padding: 14px 16px;}
.impression-list li a .detail p{ font-size: 12px;}
.impression-list li a .detail p.data{ margin-top: 2px;}
#impression .t-link{ margin: 5px 0 0 auto;}
#story{ margin-bottom: 138px;}
#story .inner::before{ width: 398px; height: 402px; left: -265px; top: -44px;}
#story .inner::after{ width: 333px; height: 299px; left: 682px; top: 628px;}
#story .tit-box{ margin-bottom: 85px;}
#story .tit-box::after{ margin: 12px 0 0 50px;}
.story-box{ display: flex; margin-bottom: 90px;}
.story-box .detail{ width: 360px; padding-top: 135px; margin-right: auto;}
.story-box .detail h3{ font-size: 100px; margin-bottom: 30px;}
.story-box .detail .sub{ font-size: 18px; margin-bottom: 100px;}
.story-box .detail .sub::after{ width: 44px; bottom: -55px;}
.story-box .detail .read{ font-size: 14px;}
.story-box .img-box{ padding-right: 104px;}
.story-box .img-box .img02{ margin-top: -32px;}
.story-box .img-box .img02 img{ margin-right: -140px;}
.story-box .img-box p{ font-size: 10px; right: 40px; top: 35px;}
.story-list{ display: flex; flex-wrap: wrap;}
.story-list li{ width: 374px; margin: 0 24px 30px 0;}
.story-list li:nth-child(3n){ margin-right: 0;}
.story-list li a{ transition: .4s;}
.story-list li a:hover{ opacity: 0.8;}
.story-list li a .img img{ width: 100%;}
.story-list li a .detail{ padding: 14px 16px;}
.story-list li a .detail p{ font-size: 12px;}
.story-list li a .detail p.data{ margin-top: 2px;}
#story .t-link{ margin: 5px 0 0 auto;}
#movie{ background: url(../../img/movie-bg_pc.jpg) center top no-repeat; background-size: 100%; padding: 95px 0 110px; margin-bottom: 120px;}
.movie-list{ display: flex; flex-wrap: wrap; margin-bottom: 30px;}
.movie-list li{ width: 374px; margin: 0 24px 30px 0;}
.movie-list li:nth-child(3n){ margin-right: 0;}
.movie-list li a{ transition: .4s;}
.movie-list li a:hover{ opacity: 0.8;}
.movie-list li a .img img{ width: 100%;}
.movie-list li a .detail{ padding: 14px 16px;}
.movie-list li a .detail p{ font-size: 12px;}
#movie .t-link{ width: 300px; margin: 0 auto;}
#news{ margin-bottom: 120px;}
#news .tit-box{ position: absolute; left: 0; top: 0;}
.news-list{ width: 770px; margin-left: auto;}
.news-list li{ border-bottom: 1px solid #D9D9D9; margin-bottom: 12px;}
.news-list li:last-child{ margin-bottom: 0;}
.news-list li a .img,
.news-list li a .detail{ transition: .4s;}
.news-list li a:hover .img,
.news-list li a:hover .detail{ opacity: 0.8;}
.news-list li a .img{ width: 118px; margin-right: 32px;}
.news-list li a .img img{ width: 100%;}
.news-list li a .detail{ width: 560px; margin-right: auto;}
.news-list li a .detail p{ font-size: 14px;}
.news-list li a .detail p.data{ font-size: 12px; margin-top: 5px;}
.news-list li a .arrow{ background-size: 12px; width: 34px; height: 18px; transition: .4s;}
.news-list li a:hover .arrow{ background: #009844 url(../img/arrowR-white.svg?260520-03) center center no-repeat; background-size: 12px; border: 2px solid #009844;}
#news .t-link{ position: absolute; left: 0; bottom: 0;}
.qa-list dt{ padding: 25px 20px;}
.qa-list dt .en{ font-size: 18px; width: 40px; height: 40px; padding-top: 10px; margin-right: 15px;}
.qa-list dt .stit{ font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 5px;}
.qa-list dt .plus-minus{ width: 34px; height: 18px; transition: .4s; margin: 10px 0 0 auto;}
.qa-list dt:hover .plus-minus{ background: #009844;}
.qa-list dt .plus-minus span{ font-size: 12px; top: -3px;}
.qa-list dt:hover .plus-minus span{ color: #fff;}
.qa-list dt .plus-minus span.close{ top: 1px;}
.qa-list dd{ padding: 25px 20px;}
.qa-list dd .en{ font-size: 18px; width: 40px; height: 40px; padding-top: 10px; margin-right: 15px;}
.qa-list dd .detail{ font-size: 14px; font-weight: 400; line-height: 2.0; margin-top: 5px;}

/* etc */
.bnr-nsexp{ margin: -60px 0 60px;}
.bnr-nsexp a{ transition: .4s;}
.bnr-nsexp a:hover{ opacity: 0.8;}

}

/* ==== SP ===== */
@media screen and (max-width: 767px){
/* mv */
#mv{ background: #000 url(../../img/mv-img01_sp.jpg) center top no-repeat; background-size: cover; height: 600px;}
#mv .tit-box{ margin: 125px 0 0 42px;}
#mv .tit-box h1{ font-size: 36px; margin-bottom: 22px;}
#mv .tit-box span{ font-size: 12px; padding: 8px 15px; margin-bottom: 25px;}
#mv .tit-box .read{ font-size: 12px; line-height: 2.0;}

/* contents */
#contents{ background: url(../../img/bg_sp.jpg) center top repeat-y; background-size: 100%; padding: 100px 0 50px;}
.list-box{ background: url(../../img/list-bg_sp.jpg) center top no-repeat; background-size: 100%; border-bottom: 3px solid #009844; width: calc(100% - 36px); top: -115px; left: 50%; transform: translateX(-50%);}
.list-box a{ display: block; padding: 25px 24px 15px;}
.list-box .detail{ margin-bottom: 20px;}
.list-box .detail h2{ font-size: 18px; line-height: 1.4; margin-bottom: 12px;}
.list-box .detail p{ font-size: 12px;}
.list-box .t-link{ margin-left: auto;}
#g-nav{ padding: 0 40px; margin-bottom: 40px;}
#g-nav ul li{ border-bottom: 1px solid #D9D9D9;}
#g-nav ul li:last-child{ margin-right: 0;}
#g-nav ul li a{ padding: 12px 0 12px 40px;}
#g-nav ul li.new a{ padding-top: 24px;}
#g-nav ul li.new a::after{ font-size: 10px; left: 40px; top: 8px;}
#g-nav ul li a::before{ content: "" ; background: url(../img/arrowR-green.svg?260520-03) center center no-repeat; width: 12px; height: 8px; position: absolute; right: 0; bottom: 21px;}
#g-nav ul li.special a{ background-size: 24px; background-position-x: left 2px;}
#g-nav ul li.impression a{ background-size: 25px; background-position-x: left 1px;}
#g-nav ul li.story a{ background-size: 28px;}
#g-nav ul li.movie a{ background-size: 29px;}
#g-nav ul li.news a{ background-size: 19px; background-position-x: left 5px;}
#g-nav ul li a p{ font-size: 10px;}
#g-nav ul li a p.en{ font-size: 14px; margin-bottom: 3px;}
.tit-box{ margin-bottom: 15px;}
.tit-box .tit .en{ font-size: 24px; margin-bottom: 4px;}
.tit-box .tit h2{ font-size: 16px;}
section .inner{ padding: 0 40px;}
#special{ margin-bottom: 65px;}
#special .tit-box::after{ margin: 10px 0 0 15px;}
.special-list li{ margin-bottom: 8px;}
.special-list li a .img{ width: 138px;}
.special-list li a .img img{ width: 100%;}
.special-list li a .detail{ padding-right: 10px;}
.special-list li a .detail p{ font-size: 12px; line-height: 1.3;}
.special-list li a .detail p.data{ font-size: 10px; margin-top: 8px;}
.special-list li:first-child{ margin-bottom: 16px;}
.special-list li:first-child a .detail{ padding: 8px 12px 10px;}
.special-list li:first-child a .detail p{ line-height: 1.6;}
.special-list li:first-child a .detail .data{ font-size: 12px; margin-top: 4px;}
#special .t-link{ width: 158px; margin: 24px auto 0;}
#impression{ margin-bottom: 100px;}
#impression .tit-box::after{ margin: 10px 0 0 15px;}
.impression-list li{ margin-bottom: 8px;}
.impression-list li a .detail{ padding: 8px 12px 10px;}
.impression-list li a .detail p{ font-size: 12px; line-height: 1.6;}
.impression-list li a .detail p.data{ font-size: 12px; margin-top: 4px;}
#impression .t-link{ width: 158px; margin: 24px auto 0;}
#story{ margin-bottom: 48px;}
#story .inner::before{ width: 211px; height: 213px; right: -32px; top: -90px;}
#story .inner::after{ width: 241px; height: 270px; left: -70px; top: 648px;}
#story .tit-box{ margin-bottom: 10px;}
#story .tit-box::after{ content: none;}
.story-box{ margin-bottom: 96px;}
.story-box .detail{ margin-bottom: 35px;}
.story-box .detail h3{ font-size: 80px; margin-bottom: 10px;}
.story-box .detail .sub{ font-size: 18px; margin-bottom: 55px;}
.story-box .detail .sub::after{ width: 32px; bottom: -30px;}
.story-box .detail .read{ font-size: 14px;}
.story-box .img-box{ padding: 0 40px 0 18px; margin: 0 -40px;}
.story-box .img-box .img02{ margin-top: -18px; text-align: right;}
.story-box .img-box .img02 img{ width: 168px; margin-right: -42px;}
.story-box .img-box p{ font-size: 10px; right: -10px; top: -18px;}
.story-list li{ margin-bottom: 8px;}
.story-list li a .detail{ padding: 8px 12px 10px;}
.story-list li a .detail p{ font-size: 12px; line-height: 1.6;}
.story-list li a .detail p.data{ font-size: 12px; margin-top: 4px;}
#story .t-link{ width: 158px; margin: 24px auto 0;}
#movie{ background: url(../../img/movie-bg_sp.jpg) center top no-repeat; background-size: 100%; padding: 48px 0 55px; margin-bottom: 45px;}
.movie-list li{ margin-bottom: 16px;}
.movie-list li a .detail{ padding: 8px 12px 10px;}
.movie-list li a .detail p{ font-size: 12px; line-height: 1.6;}
#movie .t-link{ width: 100%; margin: 18px auto 0;}
#movie .t-link > a p{ font-size: 13px;}
.news-list{ margin-left: auto;}
.news-list li{ margin-bottom: 16px;}
.news-list li:last-child{ margin-bottom: 0;}
.news-list li a{ position: relative; align-items: start;}
.news-list li a .img{ width: 118px; margin-right: 15px;}
.news-list li a .detail p{ font-size: 13px; line-height: 1.4;}
.news-list li a .detail p.data{ font-size: 12px; margin-top: 2px;}
.news-list li a .arrow{ background-size: 12px; width: 34px; height: 18px; position: absolute; right: 0; bottom: 0;}
#news{ margin-bottom: 45px;}
#news .t-link{ width: 158px; margin: 32px auto 0;}
.qa-list dt{ align-items: center; padding: 15px 10px;}
.qa-list dt .en{ font-size: 14px; width: 30px; height: 30px; padding-top: 7px; margin-right: 10px;}
.qa-list dt .stit{ font-size: 14px; font-weight: 400; line-height: 1.6;}
.qa-list dt .plus-minus{ width: 34px; height: 18px; margin-left: 10px;}
.qa-list dt .plus-minus span{ font-size: 12px; top: -2px;}
.qa-list dt .plus-minus span.close{ top: 0;}
.qa-list dd{ padding: 15px 10px;}
.qa-list dd .en{ font-size: 14px; width: 30px; height: 30px; padding-top: 7px; margin-right: 10px;}
.qa-list dd .detail{ font-size: 12px; font-weight: 400; line-height: 2.0;}

/* etc */
.bnr-nsexp{ margin: -20px 36px 40px;}
}