@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* common
==========================================================*/

body { font: 15px/2 'Noto Sans JP', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", meiryo, "ＭＳ Ｐゴシック","MS PGothic",  Helvetica, Arial, sans-serif; margin:0; padding: 0; letter-spacing:1px; color:#000; -webkit-text-size-adjust: 100%;background: #e7cb62;}
@media screen and (max-width: 750px) {
body { font: 13px/1.8 'Noto Sans JP', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", meiryo, "ＭＳ Ｐゴシック","MS PGothic",  Helvetica, Arial, sans-serif; margin:0; padding: 0; letter-spacing:1px; color:#000; -webkit-text-size-adjust: 100%;background: #e7cb62;}
}

a { text-decoration: none; color: #000; outline: none; -webkit-transition: all .3s; transition: all .3s;}
a *,
a:after,
.trans03{-webkit-transition: all .3s; transition: all .3s; }
a:hover { text-decoration: none; -webkit-transition: all .3s; transition: all .3s;}
.hoverbig:hover { transform: scale(1.1);}
@media screen and (max-width: 750px){
    .hoverbig:hover { transform: scale(1);}
}
img { -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; max-width: 100%; height: auto; vertical-align: bottom;}
:focus { outline: 0; }

.flex { display: flex; flex-wrap: wrap; }
.flex-nowrap { display: flex; }
.flex-jcs {display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex-jca { display: flex; justify-content: space-around; flex-wrap: wrap; }
.flex-center {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex-aic { display: flex; align-items: center; flex-wrap: wrap; }
.flex-jcc { display: flex; justify-content: center; flex-wrap: wrap; }

.centerposi { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
.centertate { position: absolute; top: 50%; -webkit-transform: translateY(-50%); /* Safari用 */ transform: translateY(-50%); } 
.centeryoko { position: absolute; left: 50%; -webkit-transform: translateX(-50%); /* Safari用 */ transform: translateX(-50%); } 

.inner800 { max-width: 800px; width: calc(100% - 40px); margin: 0 auto;}

.roboto { font-family: 'Roboto', sans-serif; }

.fn47 { font-size: calc(47em / 15); }
.fn40 { font-size: calc(40em / 15); }
.fn33 { font-size: calc(33em / 15); }
.fn30 { font-size: calc(30em / 15); }
.fn26 { font-size: calc(26em / 15); }
.fn25 { font-size: calc(25em / 15); }
.fn24 { font-size: calc(24em / 15); }
.fn20 { font-size: calc(20em / 15); }
.fn18 { font-size: calc(18em / 15); }
.fn17 { font-size: calc(17em / 15); }
.fn16 { font-size: calc(16em / 15); }
.fn14 { font-size: calc(14em / 15); }
.fn13 { font-size: calc(13em / 15); }
.fn12 { font-size: calc(12em / 15); }

.fc-b { color: #2c6eab;}
.fc-y { color: #fded4f;}
.fc-w { color: #fff;}

.bg-o { background: #e7cb62;}
.bg-y { background: #e8dd71;}
.bg-y2 { background: #fded4f;}
.bg-b { background: #2c6eb0;}
.bg-w { background: #fff;}

#wrapper { overflow: hidden;}

/* header
==========================================================*/

#menu { width: 100%; right: 0; top: 0; display: none; position: fixed; background: #ECDE5C; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 9901 !important; overflow: scroll !important; }
#menu > div { height: 100px; }
.navInner { width: 44px; height: 33px; right: 28px; top: 33px; z-index: 9999; cursor: pointer; display: block; position: fixed;}
.menu-trigger { width: 100%; height: 100%; line-height: inherit; cursor: pointer; position: relative; display: inline-block; transition: all .3s; }
.menu-trigger.active { margin-left: 0; }
.menu-trigger span { width: 44px; height: 6px; border-radius: 3px; display: inline-block; transition: all .3s; position: absolute; background: #2c6eb0;  }
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { bottom: calc(50% - 3px); }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger:not(.active):hover span:nth-of-type(1) { top: 2px; }
.menu-trigger:not(.active):hover span:nth-of-type(3) { bottom: 2px; }
.menu-trigger.active span {}
.menu-trigger.active span:nth-of-type(1) { transform: translateY(13.5px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { display: none; }
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-13.5px) rotate(45deg); }
@media screen and (max-width: 750px) {
    #menu { background: #e7cb62; }
    #menu > div { height: 100vh; }  
    .navInner { width: calc(44px * 0.8); height: calc(33px * 0.8); right:13px; top: 20px; }
    .menu-trigger span { width: 100%; height: 4px; border-radius: 2px; }
    .menu-trigger span:nth-of-type(2) { bottom: calc(50% - 2px); }
    .menu-trigger.active span:nth-of-type(1) { transform: translateY(11.5px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-11.5px) rotate(45deg); }
}  
    
header{}
.logo{ width: 177px; left: 30px; top: 20px; position: fixed; z-index: 9;}
.head-l{ width: 220px; height: 100%; background: #f8e84f; }
.head-l:hover { background: #fff; }
.head-l div:nth-child(1){ margin-right: 10px; width: 25px;}
.head-l div:nth-child(2){ font-weight: bold;}
.head-r{ width: calc(100% - 220px - 100px); height: 100%; position: relative; z-index: 2;}
.gnavul{height: 100%;}
.gnavul li{height: 100%;}
.gnavul li a{ padding: 0 20px; height: 100%; color: #fff; font-weight: bold; letter-spacing: 0.15em; }
#slide-line{position: absolute; z-index: -1; bottom: 30px; height: 5px; background-color:#f7ea27; -webkit-transition: all .3s ease; transition: all .3s ease;}
@media screen and (max-width: 750px) {
    #menu .flex { flex-direction: column-reverse; }
    .logo{ width: 120px; left: 10px; top: 16px; z-index: 9902 !important; }
    .head-l{ width: 100%; height: calc((100vh - 70px) / 6); }
    .head-l div:nth-child(1){ margin-right: 10px; width: 25px;}
    .head-l div:nth-child(2){ font-weight: bold;}
    .head-r{ width: 100%; height: auto; position: relative; z-index: 2;}
    .gnavul{height: auto; display: block;}
    .gnavul li{height: auto;}
    .gnavul li a{ padding: 0 20px; height: calc((100vh - 70px) / 6); border-bottom: 1px dotted #fff; }
    .gnavul li:last-child a { border: none;}
    #slide-line{ display: none;}
}


/* footer
==========================================================*/

footer{ padding: 60px 60px 20px; position: relative; color: #fff;}
footer a { color: #fff;}
.foot-t{}
.foot-t-l{}
.footlogo{ margin-bottom: 50px; max-width: 280px;}
.footnav{ margin-bottom: 50px; margin-left: -50px;}
.footnav li{ margin-left: 50px;}

.foot-t-r{ margin-top: 30px;}
.foot-rul{ margin-bottom: -40px; max-width: 520px; width: 100%; justify-content: flex-end;}
.foot-rul li{ margin-bottom: 40px; margin-left: 35px;}

.footsnswrap{}
.footsnsul{  margin-left: -10px;}
.footsnsul li { margin-left: 10px; width: 55px;}
.footsnsul li a { display: block;}
.footcopy{ text-align: center; font-weight: 700; }
.pagetop{ width: 90px; right: 30px; bottom: 40px; position: absolute;}
.pagetop a { display: block;}

@media screen and (max-width: 1200px){
    footer{ padding: 40px 40px 20px;}
    .footlogo{ margin-bottom: 40px; max-width: calc(280px * 0.8); width: 45vw;}
    .footnav{  margin-left: -30px;}
    .footnav li{ margin-left: 30px;}
    .pagetop{ width: 70px; right: 30px; bottom: 20px; }
}
@media screen and (max-width: 1000px){
    .foot-t{ display: block;}
    .footlogo{ margin: 0 auto 40px;}
    .footnav{ justify-content: center; margin-left: -30px;} 
    .foot-rul{ margin: 0 auto; max-width: 700px; justify-content: center;}
    .foot-rul li{  margin-bottom: 20px; margin-left: 20px; transform: scale(0.9);}
    .footsnsul{ margin: 20px 0 30px; justify-content: center;}
    .footsnsul li { width: 50px}
} 
@media screen and (max-width: 750px){
    .pagetop{ width: 50px; right: 10px; bottom: 10px; }
    .footnav{  margin-left: -20px; margin-bottom: -20px;}
    .footnav li{ margin-left: 20px; margin-bottom: 20px;}
}



/* index
==========================================================*/

.loading{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: #e7cb62;
  z-index: 9999999;
}
.animation{
  max-width: 500px; width: 50vw;
  -webkit-animation: lodanimetion 1500ms ease-out forwards infinite;
  animation: lodanimetion 1500ms ease-out forwards infinite;
}
@keyframes lodanimetion {
  from,to {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
}


.mainwrap{ position: relative; }
.mainwrap:after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #e8dd71; animation: mainwrap 1s forwards 0.6s; }
@keyframes mainwrap {
  0% { left: -100%; }
  100% { left: 0;}
}
.mainbg { position: relative; z-index: 3;}
.mainover { position: absolute; top: 0; left: 0; z-index: 4; animation: poyon 2s forwards;}
.poyon { opacity: 0;}
.poyon.started  {animation: poyon 1.2s forwards;}
.poyon2.started  {animation: poyon 1.2s forwards 0.5s;}
@keyframes poyon {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); opacity: 1; }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 1; }
}
.poyoon { opacity: 0;}
.poyoon.started  {animation: poyoon 1.2s forwards;}
@keyframes poyoon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); opacity: 1; }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 1; }
}
.fadeup { opacity: 0; position: relative;}
.fadeup.started { animation: fadeup 0.5s forwards; }
.fadeup2.started { animation: fadeup 0.5s forwards 0.2s; }
.fadeup3.started { animation: fadeup 0.5s forwards 0.4s; }
.fadeup4.started { animation: fadeup 0.5s forwards 0.6s; }
@keyframes fadeup {
  0%   { top: 50px; opacity: 0; }
  100% { top: 0; opacity: 1; }
}
.mainlogo{ width: 620px; left: calc(50% - 310px); top: calc(50% - 115px); position: absolute; opacity: 0; z-index: 5; }
.mainlogo.started {animation: poyon 1.2s forwards 0.4s;}
.mainbtn{ bottom: 30px; right: 30px; position: absolute; opacity: 0; z-index: 5;}
.mainbtn.started  {animation: poyoon 1.2s forwards 0.8s;}
.mainbtn a { width: 190px; height: 190px; border-radius: 50%; flex-direction: column; text-align: center; box-shadow: -3px 3px 0 0 rgba(0, 0, 0, 0.5);}
.mainbtn a div:nth-child(1){ margin-bottom: 10px; width: 48px;}
.mainbtn a div:nth-child(2){ font-weight: bold; line-height: 1.3;}
.br-show-1100 { display: none;}
@media screen and (max-width: 1100px){
    .br-show-1100 { display: inline;}
    .mainlogo{ width: calc(620px * 0.8); left: calc(50% - 310px * 0.8); top: calc(50% - 115px * 0.8);  } 
    .mainbtn{ bottom: -50px; }
    .mainbtn a{ width: calc(190px * 0.8); height: calc(190px * 0.8);}
    .mainbtn a div:nth-child(1){ margin-bottom: 10px; width: calc(48px * 0.8);}
    .mainbtn a div:nth-child(2){ font-size: calc(22em / 15); }
} 
@media screen and (max-width: 750px) {
    .mainwrap{ padding-top: 20px; }
    .mainlogo{ width: 310px; left: calc(50% - 310px / 2); top: calc(50% - 115px / 2); }
    .mainbtn{ bottom: -50px; right: 15px; }
    .mainbtn a{ width: calc(190px * 0.5); height: calc(190px * 0.5);}
    .mainbtn a div:nth-child(1){ margin-bottom: 5px; width: calc(48px * 0.5);}
    .mainbtn a div:nth-child(2){ font-size: calc(18em / 15); line-height: 1.1 }
}
@media screen and (max-width: 500px) {
    .mainlogo{ width: 250px; left: calc(50% - 250px / 2); top: calc(50% - 93px / 2); }
}   
@media screen and (max-width: 400px) {
    .mainlogo{ width: 200px; left: calc(50% - 200px / 2); top: calc(50% - 75px / 2); }
}     
    
    
.page-ind section { position: relative; }
.inner { position: relative; z-index: 3;}
.conceptwrap{ padding: 120px 0;}
.side-en { color: #2c6eb0; position: absolute; transform: rotate(90deg); line-height: 1; top: 50%; left: 0; letter-spacing: 0.2em; font-weight: 900; z-index: 5;}
.side-en.side-right { left: inherit; right: 0; }
@media screen and (max-width: 1100px){
    .side-en { left: -20px; }
    .side-en.side-right { left: inherit; right: -20px; }   
}
.mid { max-width: 892px; width: calc(100% - 20px); margin: 0 auto 60px;}
.mid01{}
.concepttxt{ font-weight: bold; text-align: center; line-height: 2.5; position: relative; display: inline-block;}
.concepttxt p{}
.concepttxt p span { font-size: 1.32em;}
.ill01{ width: 90px; right: 0; bottom: -50px;}
.ill02{ width: 60px; left: 50px; bottom: -150px;}
@media screen and (max-width: 1100px){
    .ill01{ width: 90px; right: -100px; bottom: 100px;}
    .ill02{ width: 60px; left: -100px; bottom: -180px;}
}
@media screen and (max-width: 900px){
    .ill01{ width: 90px; right: -20px; bottom: 100px;}
    .ill02{ width: 60px; left: 0; bottom: -180px;}
}
.maru {animation: maru 12s linear infinite;}
@keyframes maru {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.maru-l { width: 280px; position: absolute;}
.maru-s { width: 150px; position: absolute;}
.maru01 { top: 120px; left: calc(50% - 650px);}
.maru02 { top: 160px; right: calc(50% - 700px);}
.maru03 { bottom: 160px; right: calc(50% - 600px);} 
.maru04 { bottom: 0; left: calc(50% - 600px);}
@media screen and (max-width: 1200px){
    .maru01 { top: 60px; left: -20px;}
    .maru02 { right: -80px;}
    .maru03 { right: 40px;} 
    .maru04 { left: 40px;} 
}   
@media screen and (max-width: 750px){
    .maru-l { width: calc(28vw * 1.2);}
    .maru-s { width: calc(15vw * 1.2);}
    .maru02 { right: -40px;}
    .maru03 { bottom: 40px;} 
    .maru04 { bottom: -40px; left: 20px} 
}

.conceptwrap:after { content: ""; width: 120%; height: 60px; background: #2c6eb0; position: absolute; left: -10%; top: calc(100% + 120px); transform: rotate(-15deg); z-index: 2;}
@media screen and (max-width: 750px){
    .conceptwrap{ padding: 80px 0 0;}
    .side-en { display: none;}
    .mid { margin: 0 auto 30px;}
    .concepttxt{ font-size: calc(20em / 15);  line-height: 2; }
    .ill01{ width: calc(90px * 0.7); right: 0; bottom: inherit; top: -40px;}
    .ill02{ width: calc(60px * 0.7); left: calc(50% - 25px); bottom: -120px;}
    .conceptwrap:after { height: 30px;  top: calc(100% + 60px); }
}
@media screen and (max-width: 500px){
    .concepttxt{ font-size: 3.6vw;}
}

.kakudai { transform: scale(0.5); opacity: 0; }
.kakudai.started { animation: kakudai 0.5s forwards;}
.kakudai2.started { animation: kakudai 0.5s forwards 0.2s;}
@keyframes kakudai {
  0%   { transform: scale(0); opacity: 0;}
  100% { transform: scale(1); opacity: 1;}
}
.sportswrap{ padding: 350px 0 200px; position: relative; }
.sports-bg { width: 95vw; }
.sports-bg:after,
.moviewrap:after,
.faqbg:after,
.bg02wrap:before{ content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: #EDCB4B; z-index: 2;}
.faqbg:after { background: #EADE5D; }
.bg02wrap:before {z-index: 1; }
.sports-bg.started:after,
.moviewrap.started:after,
.faqbg.started:after{ animation: bg 1s forwards;}
.bg02wrap.started:before{ animation: bg 1s forwards 1s;}
@keyframes bg {
  0%   { width: 100%;}
  100% { width: 0;}
}
.sportsul{ max-width: 1050px; width: calc(100% - 60px); margin: 0 auto;}
.sportsul li { margin-bottom: 60px;}
.sportsul li:nth-child(1),
.sportsul li:nth-child(4){ max-width: 505px; width: 50%;}
.sportsul li:nth-child(2),
.sportsul li:nth-child(3){ max-width: 455px; width: 45%;}
.sportsul li:nth-child(2n) { margin-top: -150px;}
.sportsul li:nth-child(1),
.sportsul li:nth-child(2) { margin-right: -20px;}
.sportsul li:nth-child(3),
.sportsul li:nth-child(4) { margin-left: -20px;} 
@media screen and (max-width: 2200px){
    .sportsul li:nth-child(1),
    .sportsul li:nth-child(4){ width: 51%;}
    .sportsul li:nth-child(2),
    .sportsul li:nth-child(3){ width: 46%;}  
}
.slash { position: absolute; }
.slash-l { width: 205px; left: 0; bottom: 0; }
.slash-r { width: 330px; right: 0; top: 0; }
.slash01 { top:-8vw;}
.slash02 { bottom: 0; }
@media screen and (max-width: 750px){
    .sportswrap{ padding: 33vw 0 15vw;}
    .sportsul li { margin-bottom: 30px;}
    .sportsul li:nth-child(2n) { margin-top: -20vw;}
    .slash-l { width: calc(205px * 0.5); }
    .slash-r { width: calc(330px * 0.5);}
}
@media screen and (max-width: 2300px){.slash01 { top:-6vw;}}   
@media screen and (max-width: 1700px){.slash01 { top:-3vw;}}
@media screen and (max-width: 1200px){.slash01 { top: 2vw;}}
@media screen and (max-width: 800px){.slash01 { top: 9vw;}}
@media screen and (max-width: 750px){.slash01 { top: -1vw;}}
@media screen and (max-width: 500px){.slash01 { top: 5vw;}}

.howtowrap{}
.midwrap{ margin-bottom: 150px; height: 60px; background: #2c6eb0; text-align: center;}
.midsub{ top: -120px; width: 100%; position: absolute; font-weight: 700;}
.midsub > span { position: relative;}
.midsub > span:after { content: ""; width: calc(100% + 20px); height: 13px; background: #fded4f; position: absolute; bottom: 0; left: -10px; transform: skewX(-30deg);}
.midsub > span span { position: relative; z-index: 2}
.midjp{ top: -40px; width: 100%; position: absolute;}
.mid02{}
.miden{ top: 80px; position: relative; font-weight: 700;}
#howtoslide{ padding: 20px 0;} 
#howtoslide li{ margin-left: 5px;} 
@media screen and (max-width: 750px){
    .midwrap{ margin-bottom: 12vw; height: 6vw; }
    .midsub{ top: -13vw; font-size: 4vw;}
    .midjp{ top: -4vw;}
    .miden{ top: 8vw; font-size: 4vw;}
    #howtoslide{ padding: 10px 0;} 
    #howtoslide li{ margin-left: 2px;}  
}

.moviewrap{ background: url(../images/index/bg-moyo01.png) no-repeat center 20px; background-size: 130% auto; position: relative;}
.moviewrap .inner { z-index: 4;}
.maru05 { left: calc(50% + 500px); top: 180px; }
.maru06 { left: calc(50% - 600px); top: 300px; }
@media screen and (max-width: 1200px){
    .maru05 { left: inherit; right: -20px; top: 180px; }
    .maru06 { left: 20px; top: 300px; }
}
.moviewrap .slashwrap { padding-top: 130px; }
.moviewrap .bg-y { padding-bottom: 80px; position: relative; }
.moviewrap .bg-y:before { content: ""; position: absolute; bottom: calc(100% + 15vw); left: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 25.6vw 100vw; border-color: transparent transparent #e8dd71 transparent; z-index: -1}
.moviewrap .bg-y:after {content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 15vw; background: #e8dd71; z-index: -1 }
.maru07 { left: calc(50% - 600px); top: -350px; }
.maru08 { left: calc(50% + 500px); top: -500px; }
.maru09 { left: calc(50% + 300px); top: -70px; }
.maru10 { left: calc(50% - 500px); top: 0; }
@media screen and (max-width: 1200px){
    .maru07 { left: -20px; top: -300px; }
    .maru08 { left: inherit; right: -40px; top: -500px; }
    .maru09 { left: inherit; right: 80px; top: -70px; }
    .maru10 { left: 20px; top: 0; } 
}
.moviewrap .slashwrap:after { z-index: 1;}
.moviemidwrap{ text-align: center;}
.mid03{ display: inline-block;position: relative;}
.mid03-t{ width: 170px; top: -80px; right: 0; position: absolute;}
@media screen and (max-width: 750px){
    .moviewrap .slashwrap { padding-top: 75px; }
    .moviewrap .bg-y { padding-bottom: 40px }
    .mid03-t{ width: 100px; top: -45px; right: 0;}
}
@media screen and (max-width: 550px){
    .mid03-t{ width: 20vw; }
}

.videowrap { max-width: 990px; width: calc(100% - 40px); height: 530px; border-radius: 265px; margin: 0 auto 50px; }
.video-js { width: 728px; height: 410px;}
@media screen and (max-width: 1200px){
    .videowrap { max-width: calc(990px * 0.8); height: calc(530px * 0.8); border-radius: calc(265px * 0.8); }  
    .video-js {width: calc(728px * 0.8); height: calc(410px * 0.8);}
}
@media screen and (max-width: 650px){
    .videowrap { height: calc(530px * 0.6); border-radius: calc(265px * 0.6); }  
    .video-js {width: calc(728px * 0.6); height: calc(410px * 0.6);}
}
@media screen and (max-width: 550px){
    .videowrap { height: calc(530px * 0.4); border-radius: calc(265px * 0.4); }  
    .video-js {width: calc(728px * 0.4); height: calc(410px * 0.4);}
}
.videowrap > div {border: 5px solid #E7D757; }
.vjs-big-play-button { display: none !important;}

/*タブ切り替え全体のスタイル*/
.indlinetabs { padding-bottom: 120px;}
/*タブのスタイル*/
.indlinetabbtn { bottom: 0;  cursor: pointer;cursor: pointer;}
.indlinetabbtn > div { width:320px; height: 100px; border: 6px solid #2c6eb0;  text-align: center; line-height: 1.3; border-radius: 10px; -webkit-transition: all .3s; transition: all .3s; font-weight: 500; }
.indlinetabbtn01 { margin-left: -370px; }
.indlinetabbtn03 { margin-left: 370px; }
@media screen and (max-width: 1200px){
    .indlinetabs { padding-bottom: 80px;}
    .indlinetabbtn > div { width: 240px; height: 80px; border: 4px solid #2c6eb0; font-size: calc(20em / 15); }
    .indlinetabbtn01 { margin-left: -270px; }
    .indlinetabbtn03 { margin-left: 270px; }
} 
@media screen and (max-width: 900px){
    .indlinetabbtn > div { width: 220px; height: 80px; font-size: calc(18em / 15); }
    .indlinetabbtn01 { margin-left: -240px; }
    .indlinetabbtn03 { margin-left: 240px; }
}
@media screen and (max-width: 750px){
    .indlinetabs { padding-bottom: 90px;}
    .indlinetabbtn { max-width: 300px; width: calc(100% - 40px);}
    .indlinetabbtn01 { margin-left: 0; bottom: 60px;}
    .indlinetabbtn03 { margin-left: 0; bottom: -60px;}
    .indlinetabbtn > div { width: 100%; height: 50px;border:3px solid #2c6eb0; }
  
}
/*ラジオボタンを全て消す*/
input[name="indlinetabbtn"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.indlinetab_content {
  height: 0;
  clear: both;
  overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#indline-pinto:checked ~ #indline-pinto_content,
#indline-eco:checked ~ #indline-eco_content,
#indline-all:checked ~ #indline-all_content {
  height: auto;
}
/*選択されているタブのスタイルを変える*/
.indlinetabs input:checked + .indlinetabbtn > div { background: #2c6eb0; color: #fded4f; cursor: auto; }
.indlinetabs input:checked + .indlinetabbtn > div:hover { transform: scale(1);} 
.indtabmid { padding: 20px 0; max-width: 475px; margin: 0 auto 50px; border-radius: 10px; line-height: 1.5; font-weight: 700;}
.youtubelink{ padding: 20px; margin-top: 50px; position: relative; z-index: 2;}
.youtubelink:hover { background: #fded4f; }
.youtubelink div:nth-child(1) { width: 25px;}
.youtubelink div:nth-child(1) img { vertical-align: middle; }
.youtubelink div:nth-child(2) { margin-left: 15px; line-height: 1; font-weight: 700;}
.youtubelink div:nth-child(3) { margin-left: 30px; width: 150px;}
@media screen and (max-width: 750px){
    .indtabmid { padding: 15px 0; max-width: 300px; margin: 0 auto 25px; border-radius: 10px; font-size: calc(20em / 15);}
    .youtubelink{ padding: 20px; margin-top: 70px; position: relative; z-index: 2;}
    .youtubelink div:nth-child(1) { width: 25px;}
    .youtubelink div:nth-child(2) { margin-left: 10px;}
    .youtubelink div:nth-child(3) { margin-left: 20px; width: 150px;} 
} 
@media screen and (max-width: 750px){
    .youtubelink div:nth-child(1) { width: 5vw;}
    .youtubelink div:nth-child(2) { font-size: 5vw;}
    .youtubelink div:nth-child(3) { margin-left: 2.5vw; width: 30vw;}   
}

.bg02wrap { background: url(../images/index/bg-moyo01.png) no-repeat center; background-size: 120% auto; position: relative;}
.pointwrap{ padding-top: 45px; position: relative; z-index: 2;}
.pointwrap:before { content: ""; width: 100%; height: 45px; background: #2c6eb0; position: absolute; left: 0; top: 0; z-index: 4; transform: rotate(0deg);}
.pointwrap .bg-y { padding: 60px 0 160px; margin-bottom: -160px; position: relative; z-index: -1}
.pointwrap .bg-y:before {content: ""; position: absolute; top: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 25.6vw 100vw 0 0; border-color: #e8dd71 transparent transparent transparent; z-index: -1 }
.pointwrap .miden { padding-left: 60px; top: 0; z-index: 4; }
@media screen and (max-width: 750px){
    .pointwrap{ padding-top: 25px; }
    .pointwrap:before { height: 25px; }
    .pointwrap .bg-y { padding: 30px 0 80px; margin-bottom: -80px; }
    .pointwrap .miden { padding-left: 20px; }
}

#pointslide{ padding-bottom: 100px;} 
#pointslide .swiper-wrapper{ padding-top: 65px;} 
#pointslide .swiper-slide{ transform: scale(0.9);}
#pointslide .swiper-slide-active {transform: scale(1); z-index: 2; }
.pointslideno{ width: 130px; height: 130px; border-radius: 50%; position: absolute; right: -50px; top: -50px; display: none; z-index: 2; font-weight: 700; border: 7px solid #2c6eb0}
#pointslide .swiper-slide-active .pointslideno { display: flex;}
.pointslideimg{ margin-bottom: 40px; position: relative; overflow: hidden;}
.pointslideimg:after { content: ""; width: 100%; height: 100%; border: 10px solid #2c6eb0; position: absolute; top: 0; left: 0; box-sizing: border-box; border-radius: 20px;}
#pointslide .swiper-slide-active .pointslideimg:after { border: 10px solid #fded4f;}
.pointslideimg img { border-radius: 20px;}
.pointslidetxtwrap { padding: 0 30px; opacity: 0;}
#pointslide .swiper-slide-active .pointslidetxtwrap { opacity: 1;}
.pointslidemid{ margin-bottom: 30px; text-align: center; position: relative; color: #fff; }
.pointslidemid > div { border-radius:10px; font-weight: 700; position: relative; z-index: 2;}
.pointslidemid:before { content: ""; position: absolute; top: 5px; left: 5px; width: 100%; height: 100%; background: url(../images/index/shadow.png); background-size: 10px 10px; border-radius:10px;}
.pointslidetxt{ font-weight: 500;}
#pointslide .swiper-button-prev,
#pointslide .swiper-button-next{ width: 30px; height: 80px; background: url(../images/index/arrow-prev.png) no-repeat center; background-size: cover; margin: 0; left: 0; top: calc(50% - 80px - 65px); }
#pointslide .swiper-button-next {background: url(../images/index/arrow-next.png) no-repeat center; background-size: cover; left: calc(100% - 30px);  }
#pointslide .swiper-pagination{ bottom: 0;}
#pointslide .swiper-pagination-bullet { width: 30px; height: 30px; margin: 0 15px; background: #fded4f; opacity: 1;}
#pointslide .swiper-pagination-bullet-active { background: #2c6eb0; }
@media screen and (max-width: 1200px){
    .pointslideno{ width: calc(130px * 0.8); height: calc(130px * 0.8); right: -30px; top: -30px; border: 5px solid #2c6eb0; font-size: calc(24em / 15);}
    .pointslidetxtwrap { padding: 0;}
}
@media screen and (max-width: 750px){
    #pointslide{ padding-bottom: 40px;} 
    #pointslide .swiper-wrapper{ padding-top: 30px;} 
    .pointslideno{ width: calc(130px * 0.6); height: calc(130px * 0.6); right: -20px; top: -20px; border: 3px solid #2c6eb0; font-size: calc(20em / 15);}
    .pointslideimg{ margin-bottom: 20px; }
    .pointslideimg:after { border: 5px solid #2c6eb0; border-radius: 10px;}
    #pointslide .swiper-slide-active .pointslideimg:after { border: 5px solid #fded4f;}
    .pointslideimg img { border-radius: 10px;}
    .pointslidemid{ margin-bottom: 15px; }
    .pointslidemid > div { border-radius:5px; font-size: 5.5vw;}
    .pointslidemid:before { border-radius:5px;}
    #pointslide .swiper-pagination-bullet { width: 20px; height: 20px; margin: 0 10px;}
}   

#prodslide{ margin: 80px 0 180px; padding: 30px 0;} 
#prodslide .slick-slide { margin: 0 15px }
@media screen and (max-width: 750px){
    #prodslide{ margin: 40px 0 20vw; padding: 20px 0;} 
    #prodslide .slick-slide { margin: 0 10px }
}

.interiorwrap{ position: relative; z-index: 2;}
.interiorimgwrap{ padding-bottom: 30px;}
.interiorimgwrap {}
div.border { box-sizing: border-box; border: 4px solid #fded4f}
.interiorimg-t{ }
.interiorimg-t-l{ width: calc(450 / 1300 * 100%); justify-content: flex-end; }
.interiorimg-t-l-t{ padding-left: 20px; width: 100%; height: calc(470 / 1300 * 100vw); border-left: none; }
.interiorimg-t-l-t div {height: 100%; background: url(../images/index/interior01.jpg); background-size: cover; }
.interiorimg-t-l-b{ width: 100%; }
.interiorimg-t-l-b div { width: 50%; height: calc(235 / 1300 * 100vw); border-left: none; border-top: none; }
.interiorimg-t-l-b div:nth-child(1){ background: url(../images/index/interior04.jpg); background-size: cover;}
.interiorimg-t-l-b div:nth-child(2){ background: url(../images/index/interior05.jpg); background-size: cover;}
.interiorimg-t-r{ width: calc(850 / 1300 * 100%);}
.interiorimg-t-r div { border-left: none;}
.interiorimg-t-r-t{ height: calc(235 / 1300 * 100vw);}
.interiorimg-t-r-t div { width: 50%;}
.interiorimg-t-r-t div:nth-child(1) { background: url(../images/index/interior02.jpg); background-size: cover;}
.interiorimg-t-r-t div:nth-child(2) { background: url(../images/index/interior03.jpg); background-size: cover; border-right: none;}
.interiorimg-t-r-b{ height: calc(470 / 1300 * 100vw); background: url(../images/index/interior06.jpg); background-size: cover; border-top: none !important; border-right: none !important;}
.interiorimg-b{}
.interiorimg-b-l{ padding: 50px;}
.interiorimg-b-l div:nth-child(1) { margin-bottom: 10px; font-weight: 700; letter-spacing: 0.1em;}
.interiorimg-b-l div:nth-child(2) { font-weight: 500;}
.interiorimg-b-r{ flex-grow: 10; }
.interiorimg-b-r div{ width: 50%; border-top: none; }
.interiorimg-b-r div:nth-child(1){ background: url(../images/index/interior07.jpg) right bottom; background-size: cover; border-right: none;}
.interiorimg-b-r div:nth-child(2){  padding-right: 20px; }
.interiorimg-b-r div:nth-child(2) div { width: 100%; height: 100%; background: url(../images/index/interior08.jpg) right center; background-size: cover;}
@media screen and (max-width: 1000px){
    .interiorimg-b-l{ padding: 30px;}
}    
@media screen and (max-width: 750px){
    .interiorimg-b-l{ padding: 30px 20px;}
    .interiorimg-b-r{ display: block;}
    .interiorimg-b-r div{ width: 100%; height: 50%; }
} 
@media screen and (max-width: 550px){  
    .interiorimg-b-l div:nth-child(1) { font-size: calc(40vw * 0.16); }
    .interiorimg-b-l div:nth-child(2) { font-size: calc(18vw * 0.16); }  
}

.specwrap{ padding: 50px; position: relative;}
.specill { position: absolute; width: 100vw; left: 20px; top: 100px; z-index: 2; }
.specinner{ padding: 80px 0; border-radius: 20px;}
.specmidwrap { margin-bottom: 50px; padding-bottom: 100px; text-align: center; position: relative;}
.specmidwrap:after { content: ""; position: absolute; height: 10px; width: calc(100% + 100px); left: -50px; bottom: 0; background: #2c6eb0; }
.specmidwrap > div:nth-child(1) { max-width: 400px; width: 50vw; margin: 0 auto 50px;}
.specmidwrap > div:nth-child(2) { padding-bottom: 5px; width: calc(100% + 100px); margin-left: -50px; font-weight: 900; line-height: 1.4; position: relative;}
.specmidwrap > div > div { position: relative; z-index: 2;}
@media screen and (max-width: 750px){ 
    .specill { left: 10px; top: 50px;  }
    .specinner{ padding: 40px 0; border-radius: 10px;}
    .specmidwrap { margin-bottom: 25px; padding-bottom: 40px; }
    .specmidwrap:after { height: 5px; }
    .specmidwrap > div:nth-child(1) {  margin: 0 auto 25px;}
    .specmidwrap > div:nth-child(2) { padding-bottom: 3px; }
}

#colorslide{ margin-bottom: 70px;}
.colormid{ margin-bottom: 5px; padding: 0 20px; height: 35px; line-height: 35px; font-weight: 700; display: inline-block;}
#colorslide .swiper-wrapper{} 
#colorslide .swiper-slide{}
.colorname{ margin-bottom: 60px; height: 40px; line-height: 40px; position: relative;}
.colorname:after { content: ""; width: 100%; height: 3px; background: #2c6eb0; position: absolute; left: 0; bottom: -3px;}
.colorimg{}
#colorslide .swiper-pagination{ top: 5px; left: inherit; right: 0; display: inline-block; text-align: right;}
#colorslide .swiper-pagination:after { content: ""; width: calc(40px * 6 + 5px * 5 + 20px); height: 3px; background: #fff; right: 0; top: 75px; position: absolute;}
#colorslide .swiper-pagination-bullet { width: 40px; height: 40px; border-radius: 0; opacity: 1; margin: 0; margin-left: 5px;}
#colorslide .swiper-pagination-bullet:hover {}
#colorslide .swiper-pagination-bullet:nth-child(1) { background: url(../images/index/color-t01.jpg); background-size: cover;}
#colorslide .swiper-pagination-bullet:nth-child(2) { background: url(../images/index/color-t02.jpg); background-size: cover;}
#colorslide .swiper-pagination-bullet:nth-child(3) { background: url(../images/index/color-t03.jpg); background-size: cover;}
#colorslide .swiper-pagination-bullet:nth-child(4) { background: url(../images/index/color-t04.jpg); background-size: cover;}
#colorslide .swiper-pagination-bullet:nth-child(5) { background: url(../images/index/color-t05.jpg); background-size: cover;}
#colorslide .swiper-pagination-bullet:nth-child(6) { background: url(../images/index/color-t06.jpg); background-size: cover;}
.colortxtul{margin-bottom: 20px;}
.colortxtul li{ padding-left: 1.5em; position: relative;}
.colortxtul li:after { content: "※"; top: 0; left: 0; position: absolute;}
.specimgwrap{ }
.specimgwrap div:nth-child(1) { width: calc(280 / 800 * 100%);}
.specimgwrap div:nth-child(2) { width: calc(430 / 800 * 100%);}
@media screen and (max-width: 750px){
    #colorslide{ margin-bottom: 35px;}
    .colorname{ margin-bottom: 30px;}
    .specimgwrap div:nth-child(1) { width: calc(280 / 750 * 100%);}
    .specimgwrap div:nth-child(2) { width: calc(430 / 750 * 100%);}
}  
@media screen and (max-width: 500px){
    #colorslide .swiper-wrapper{ padding-top: 50px;}
    #colorslide .swiper-pagination{ top: 45px; left: -5px; right: inherit; text-align: left;}
    #colorslide .swiper-pagination:after { display: none}
}    

.wideimg{ padding-left: 10px; position: relative;}
.wideimg div { position: absolute; top: 0; left: 0;}
.wideimg div:first-child { position: inherit}
.specmid02{ padding: 30px 0 10px; margin: -30px 0 50px; width: calc(100% + 100px); margin-left: -50px; text-align: center; font-weight: 900;}
.spectabmid{ margin-bottom: 10px;}
.specdlwrap{ border-bottom: 1px solid #2c6eb0; border-right: 1px solid #2c6eb0; text-align: center;}
.specdl{ width: 50%;}
.specdl dt{ padding: 5px 10px; color: #fff; background: #2c6eb0;}
.specdl dd{ padding: 20px 10px; border-left: 1px solid #2c6eb0;}
@media screen and (max-width: 750px){
    .specmid02{ margin: -20px 0 25px -50px;}
    .specdl{ width: 100%;}
    .specdl dt{ padding: 5px 10px; }
    .specdl dd{ padding: 10px 10px;}
}

.onlinewrap{ padding: 50px 150px; position: relative;}
.onlinemid{ height: 100%; width: 80px; border-radius: 0 30px 30px 0; flex-direction: column; position: absolute; left: 0; top: 0;}
.onlinemid div:nth-child(1) { width: 32px; margin-bottom: 20px;}
.onlinemid div:nth-child(2) { width: 15px; }
.onlineul{ margin-left: -20px;}
.onlineul li { margin-left: 20px; width: calc(100% / 3 - 20px);}
.onlineul li a{ padding: 30px; border-radius: 20px; background: #fff; flex-direction: column;}
.onlineul li a.coming { position: relative; pointer-events: none;}
.onlineul li a.coming:after { content: "COMING SOON"; width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.6); color: #fff; border-radius: 20px; font-family: 'Roboto', sans-serif; font-size: 2vw;}
.onlineul li a div:nth-child(1){ margin-bottom: 15px; width: 32px;}
.onlineul li a div:nth-child(2){ max-width: 310px; width: 100%; }
.onlineul li a div:nth-child(3){ color: #777;}
@media screen and (max-width: 1300px){
    .onlineul li a div:nth-child(3){ font-size:0.9em; letter-spacing: 0;}
}
@media screen and (max-width: 1100px){
    .onlinewrap{ padding: 50px 70px;}
    .onlinemid{ width: 50px; border-radius: 0 20px 20px 0;}
    .onlinemid div:nth-child(1) { width: calc(32px * 0.8); margin-bottom: 15px;}
    .specmid02,
    .specmidwrap > div > div { font-size: 4.4vw;}
}
@media screen and (max-width: 750px){ 
    .onlinewrap{ padding: 25px 20px 25px 60px;}
    .onlinemid{ width: 40px; border-radius: 0 10px 10px 0;}
    .onlinemid div:nth-child(2) { font-size: 2.3vw;}
    .onlinemid div:nth-child(1) { width: calc(32px * 0.6); margin-bottom: 10px;}
    .onlinemid div:nth-child(2) { width: 10px; }
    
    .onlineul{ margin-left: -10px; margin-bottom: -10px;}
    .onlineul li { margin-left: 10px; width: calc(100% / 2 - 10px); margin-bottom: 10px}
    .onlineul li:last-child { width: 100%;}
    .onlineul li a{ padding: 20px 10px; border-radius: 10px;}
    .onlineul li a.coming:after { border-radius: 10px; font-size: 3.5vw;}
    .onlineul li a div:nth-child(1){ margin-bottom: 10px; width: 20px;}
    .onlineul li a div:nth-child(2){ width: 30vw; }
}    
    
.psdwrap{ padding: 50px; padding-bottom: 0;}
.psdwrap > div { border: 5px solid #2c6eb0; border-radius: 20px; padding: 50px; position: relative;}
@media screen and (max-width: 1000px){
    .specwrap,
    .psdwrap,
    .psdwrap > div{ padding: 30px;}
}
@media screen and (max-width: 750px){
    .specwrap,
    .psdwrap,
    .psdwrap > div{ padding: 20px;}
    .psdwrap{ padding-bottom: 0;}
}
.psd-t{ margin-bottom: 60px;}
.psd-t-l{ width: calc(570 / 1060 * 100%); box-sizing: border-box;}
.psd-t-r{ width: calc(460 / 1060 * 100%);}
.psdlogowrap{ margin-bottom: 50px; padding: 0 80px; position: relative;}
.psdlogo{}
.ill04{ width: 55px; top: -20px; right: 0; position: absolute; }
.ill05{ width: 48px; left: 0; bottom: -20px; position: absolute;}
.mid04{}
.psd-b{ padding-bottom: 60px; position: relative;}
.psd-b .flex-jcc div:nth-child(1) { max-width: 267px; width: 25vw; margin-right: 80px; }
.psd-b .flex-jcc div:nth-child(2) {}
.br-show-1200 { display: none;}
@media screen and (max-width: 1200px){
    .br-show-1200 { display: inline;}
}
@media screen and (max-width: 1000px){
    .psd-t{ margin-bottom: 0}
    .psd-b .flex-jcc { display: block;}
    .psd-b .flex-jcc div:nth-child(1) { margin: 0; margin-bottom: 40px; }
    .psd-b .br-show-1200 { display: none;}
    .psdlogowrap{ padding: 0 60px;}
}
.maplink{ font-weight: 700; position: absolute; right: 0; bottom: 0; padding-left: 90px; display: block; line-height: 1;}
.maplink:before { content: ""; position: absolute; width: 0; height: 10px; background: #fded4f; right: 80px; top: calc(50% - 2px); animation: maplink 1.5s infinite; }
@keyframes maplink {
  0% { width: 0; }
  100% { width: 80px;}
}
@media screen and (max-width: 750px){
    .psd-t{ margin-bottom: 30px; display: block; text-align: center;}
    .psd-t-l{ width: 60vw; margin: 0 auto 20px; }
    .psd-t-r{ width: 50vw; margin: 0 auto;}
    .psdlogowrap{ margin: 20px auto 30px; padding: 0 80px;}
    .ill04{ width: calc(55px * 0.8); top: -20px; right: -20px; }
    .ill05{ width: calc(48px * 0.8); left: -20px; bottom: -20px;}
    .psd-b{ padding-bottom: 60px; position: relative;}
    .psd-b .flex-jcc div:nth-child(1) { margin: -10vw 0 20px; padding: 10px 20px; background: #e8dd71;}
    .maplink{  right: 10px; bottom: 10px; }
}
@media screen and (max-width: 600px){
    .psd-t-l{ width: 80vw; }
    .ill04{ right: 0; }
    .ill05{ left: 0; }
    .psd-b .flex-jcc div:nth-child(2) { font-size: 2.8vw;} 
}
@media screen and (max-width: 450px){
    .psdlogowrap{  padding: 0 60px;} 
    .ill04{ width: calc(55px * 0.6); right: 5px; }
    .ill05{ width: calc(48px * 0.6); left: 5px;}
}

.faqwrap{ padding: 90px 60px 60px; position: relative;}
@media screen and (max-width: 1000px){
    .faqwrap{ padding: 90px 30px 60px;}
}
.faqbg { position: absolute; top: 0; left: 0; padding: 10px;}
.faqmid{ margin-bottom: 35px; }
.faqdl{}
.faqdl2{ display: none; }
.faqdl dt { padding-left: 130px; background: #fff; position: relative; height: 105px; box-sizing: border-box; border-radius: 10px; margin-bottom: 10px; cursor: pointer; font-weight: bold;}
.faqdl dt:before { content: "Q"; height: calc(100% - 30px); border-right: 2px dotted #2c6eb0; position: absolute; color: #2c6eb0; font-size: 60px; top: 15px; left: 30px; z-index: 2; line-height: 1; padding-right: 30px;}
.faqopen { width: 70px; height: 70px; position: absolute; right: 15px; top: calc(50% - 35px);}
.faqdl dt span::before,
.faqdl dt span::after { content: ''; display: block; width: 28px; height: 2px; background: #2c6eb0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.faqdl dt span::after { background: #2c6eb0; transform: translateY(-50%) rotate(90deg); transition: 0.5s; }
.faqdl dt.active span::after { transform: rotate(0); transition: 0.5s; }
.faqdl dd { padding: 30px 110px 50px; display: none;}
.morebtn{ margin-top: 15px; float: right; width: 50px; height: 50px; margin-right: 25px; cursor: pointer;}
.morebtn div{width: 16px; height: 16px; background: url(../images/index/yaji-bottom.png); background-size: cover;}
.morebtn.active div { transform: rotate(180deg);}
@media screen and (max-width: 750px){
    .faqwrap{ padding: 40px 20px 30px; }
    .faqmid{ margin-bottom: 20px; }
    .faqdl dt { padding: 5px 0; padding-left: 50px; padding-right: 55px; min-height: 65px; height: auto;border-radius: 5px; margin-bottom: 5px; line-height: 1.3; }
    .faqdl dt:before { height: calc(100% - 10px); line-height: 55px; font-size: 20px; top: 5px; left: 10px; padding-right: 10px;}
    .faqopen { width: 30px; height: 30px; right: 10px; top: calc(50% - 15px);}
    .faqdl dt span::before,
    .faqdl dt span::after { width: 14px; height: 2px; right: 8px;}
    .faqdl dd { padding: 15px 0 25px; }
    .morebtn{ margin-top: 5px; width: 40px; height: 40px; margin-right: 5px;}
}

.storewrap { padding-bottom: 100px}
.storemid { margin-bottom: 30px; color: #2c6eb0; font-weight: 700; text-align: center; }
.store-table { max-width: 1100px; width: 100%; margin: 0 auto 20px;}
.store-table table { width:100%; font-size: 0.8em; }
.store-table table th{ padding:6px 10px; vertical-align:middle; }
.store-table table .th1{ width:60px; }
.store-table table .th2{ }
.store-table table .th3{}
.store-table table .th4{ width: 160px; }
.store-table table .th5{ width:40px; }
.store-table table td{ vertical-align:middle; line-height:1.4em; background:#fff; padding:12px 11px; min-height:50px; color:#505050; border:2px solid #e8dd71; }
.store-table table td a       { text-decoration: underline; color:#000; }
.store-table table td a:hover { text-decoration: none; color:#505050; }
@media screen and (max-width: 800px){
    .storewrap { padding-bottom: 50px}
    .storemid { font-size: 2em; margin-bottom: 20px; }
    .store-table { margin: 0 auto 10px;}
    .store-table table th{ display:none; }
    .store-table table td{ padding:3px 11px; min-height: inherit; box-sizing: border-box; width:100%;}
    .store-table table td:first-child { padding-top:10px;}
    .store-table table td:last-child { padding-bottom:10px; }
    .store-table table td{ display: list-item; list-style:none; margin:0; border:none; }
}   
    




.brandwrap{ }
.brandwrap .slashwrap {padding: 100px 0 50px;}
.brandul { margin-left: -20px; }
.brandul li { max-width: 400px; width: calc(100% / 3 - 30px); margin-left: 20px;}
.brandul li:nth-child(2n-1) { margin-top: -90px;}
.brandul li a { display: block}
.slashwrap{ position: relative;}
.slashwrap:before{ width: 329px; height: 483px; background: url(../images/index/slash.png) no-repeat; background-size: cover; content: ""; position: absolute; top: 0; right: 0; z-index: 2;}
.slashwrap:after{ width: 205px; height: 301px; background: url(../images/index/slash02.png) no-repeat; background-size: cover; content: ""; position: absolute; bottom: 0; left: 0; z-index: 2;}
.slashwrap2:before {background: url(../images/index/slash02-t.png) no-repeat; background-size: cover;}
.slashwrap2:after {background: url(../images/index/slash02-b.png) no-repeat; background-size: cover;}
@media screen and (max-width: 1400px) {
    .slashwrap:before{ width: calc(329px * 0.6); height: calc(483px * 0.6); }
    .slashwrap:after{ width: calc(205px * 0.6); height: calc(301px * 0.6); }
}
@media screen and (max-width: 1000px){
    .brandwrap .slashwrap {padding: 80px 0 50px;}
    .mid07 { margin: 0 auto 100px;}
}
@media screen and (max-width: 750px){
    .brandwrap .slashwrap {padding: 50px 0 25px;}
    .mid07 { margin: 0 auto 50px;}
    .brandul { margin-left: -10px; }
    .brandul li {width: calc(100% / 3 - 10px); margin-left: 10px;} 
    .brandul li:nth-child(2n-1) { margin-top: -45px;}
    .slashwrap:before{ width: calc(329px * 0.3); height: calc(483px * 0.3); }
    .slashwrap:after{ width: calc(205px * 0.3); height: calc(301px * 0.3); }
}
@media screen and (max-width: 450px){
    .brandul { margin-left: 0; }
    .brandul li {width: calc(100% / 3); margin-left: 0;} 
}

.indnewsul{ margin-bottom: -20px;}
.indnewsul li { width: calc(50% - 20px); margin-bottom: 20px; }
.indnewsimg{ margin-bottom: 1.2em;}
.indnewstxt{}
.indnewstxt { }
.indnewsdate{ opacity: 0.6; margin: 0 0 0.2em;}

.page-section{ padding-top: 100px;}
@media screen and (max-width: 750px){
.page-section{ padding-top: 70px;}
}

.article{ margin-top: -100px; padding-top: 100px;}
.post-date{opacity: 0.6; margin: 0 0 0.5em;}
.post-ttl{ margin-bottom: 1em;}
.post-body{ padding-bottom: 3em;}
.post-body strong {	font-weight: bold;}
.post-body em { font-style: italic;}
.post-body del { text-decoration:line-through;}	
.post-body ul { list-style: disc; margin:0 1em 1.5em; }
.post-body ol { list-style: decimal; margin:0 1em 1.5em; }
.post-body li { list-style:inherit; margin-bottom:0.3em; }
.post-body blockquote { margin:1.2em 1.2em;}
.post-body h1{ font-size:2em; line-height:1.4em;font-weight: bold; margin-top: 0em;  margin-bottom:0.5em; }
.post-body h2{ font-size:2em; line-height:1.4em;font-weight: bold; margin-top: 3em; margin-bottom:0.5em; }
.post-body h3{ font-size:1.5em; line-height:1.4em;font-weight: bold; margin-top: 2em; margin-bottom:0.5em; }
.post-body h4{ font-size:1.2em; line-height:1.4em;font-weight: bold; margin-top: 1em; margin-bottom:0.5em; }
.post-body img{ margin:1.2em auto; max-width:100%; height:auto; }
.post-body p{ margin-bottom: 1.2em; }
.post-body a{ text-decoration:underline; }