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

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;
font-size:18px;
font-weight: 500;
text-align:left;
color:#000;
min-width:1200px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.5vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
figure.img img{ padding:10px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*video*/
video {
  width: 100%; /* 動画をレスポンシブ化 */
  max-width: 767px; /* 動画の最大幅 */
}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0; font-feature-settings: "palt";}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.mincho{ font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
.gothic{ font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
}



/*ヘッダー*/
#header ul li figure{ width: 100%; height: 800px;}
#header ul li figure img{ display: none;}
#header ul li:nth-child(1){ background: url("../images/mv05_bg.jpg") center center no-repeat; background-size: cover;}
@media screen and (max-width:767px){
#header ul li{ background: none;}
#header ul li figure{ height:auto;}
#header ul li figure img{ display:block;}
}


/*フッター*/
#footer{ color: #fff; padding: 1em; text-align: center; background: #f29600;}
#footer figure{ margin-bottom: 1em;}
#footer p{ line-height: 1em; font-size: 14px; letter-spacing: 0.1em;}
@media screen and (max-width:767px){
#footer figure img{ height:10vw;}
#footer p{ font-size:2.5vw;}
}


/*メイン*/
#content{ overflow:hidden;}
section { width:100%; background:#fff; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width:1100px;}
@media screen and (max-width:767px){
.maincontent { padding:0; margin:0 auto; width:95%;}
}


/*tit*/
h1,h2,h3,h4,h5,h6{ font-weight: bold; line-height: 1.25em; letter-spacing: 0.1em; font-feature-settings: "palt";}

h2{ text-align: center; font-size: 45px; font-weight: 700; padding: 0.5em; color: #fff; position: relative; z-index: 3; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; background: #f29600;}
h2:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.05); position: absolute; left: 0; bottom: 0; z-index: -1; }
h2 .point{ display: block; background: #fff; width: 1100px; margin: 0 auto 0.125em; border-radius: 1em; padding: 0.25em; text-shadow: none;}
h2 .point span{ color: #f29600;}
h2 strong{ font-size: 120%; color: #f0f0b4; /*color: #003264;*/}
@media screen and (max-width:767px){
h2{ font-size:6vw;}
h2 .point{ width:100%; font-size:90%; letter-spacing:0.05em;}
h2 strong{ font-size: 120%; color: #fae132;}
}


/*lead*/
#lead01 dl{ display: flex; flex-direction: row-reverse; height: 500px;}
#lead01 dl dt{ width: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#lead01 dl dd{ width: calc(100% - 600px); display: flex; align-items: flex-end; justify-content: center;}
#lead01 h3{ margin-bottom: 50px;}
#lead01 p{ line-height: 2em;}
#lead02{ background: #fff5e6;}
#lead02 dl{ display: flex; align-items: center; justify-content: center; height: 500px;}
#lead02 dl dt{ width: calc(100% - 420px); display: flex; flex-direction: column; justify-content: center;}
#lead02 dl dd{ width: 420px; display: flex; align-items: flex-end; justify-content: center;}
#lead02 h3{ margin-bottom: 50px; font-size: 36px;}
#lead02 p{ line-height: 2em;}
#lead03{ background: #000000;}
#lead03{ color: #ffffff;}
#lead03 dl{ display: flex; align-items: center; justify-content: center; height: 500px;}
#lead03 dl dt{ width: calc(100% - 420px); display: flex; flex-direction: column; justify-content: center;}
#lead03 dl dd{ width: 420px; display: flex; align-items: flex-end; justify-content: center;}
#lead03 h3{ margin-bottom: 50px; font-size: 36px;}
#lead03 p{ line-height: 2em;}
@media screen and (max-width:767px){
#lead01{ padding:7.5% 2.5% 0;}
#lead01 dl{ display:block; height:auto;}
#lead01 dl dt{ width:100%; display:block; margin-bottom:5%;}
#lead01 dl dd{ width:100%; display:block; text-align: center;}
#lead01 dl dd img{ width:33.33%;}
#lead01 h3{ margin-bottom:5%;}
#lead01 h3 img{ width:100%;}
#lead02{ padding:7.5% 2.5% 5%;}
#lead02 dl{ display:block; height:auto;}
#lead02 dl dt{ width:100%; display:block; margin-bottom:5%;}
#lead02 dl dd{ width:100%; display:block; text-align: center;}
#lead02 dl dd img{ width:100%;}
#lead02 h3{ margin-bottom:5%; font-size:6vw;}
#lead02 p{ line-height: 2em;}
#lead03{ padding:7.5% 2.5% 5%;}
#lead03 dl{ display:block; height:auto;}
#lead03 dl dt{ width:100%; display:block; margin-bottom:5%;}
#lead03 dl dd{ width:100%; display:block; text-align: center;}
#lead03 dl dd img{ width:100%;}
#lead03 h3{ margin-bottom:5%; font-size:6vw;}
#lead03 p{ line-height: 2em;}
}


/*movie*/
#movie{ background: #000; padding: 40px;}
@media screen and (max-width:767px){
#movie{ padding:5% 2.5%;}
}


/*about*/
#about{ padding: 40px 0 80px; background: url("../images/about_bg.jpg") center center no-repeat; background-size: cover;}
@media screen and (max-width:767px){
#about{ padding:7.5% 0 15%; background: url("../images/about_bg_smp.jpg") center top no-repeat #f1eceb; background-size:100% auto;}
}
#about_lead{ margin: 0 auto 40px;}
#about_lead dl{ display: table; table-layout: fixed; width: 100%;}
#about_lead dl dt{ display: table-cell; vertical-align: middle; width: 360px;}
#about_lead dl dd{ display: table-cell; vertical-align: middle; padding-left: 40px;}
#about_lead h2{ font-size: 42px; padding: 0.5em 0; margin-bottom: 20px; background: none; color: #000; box-shadow: none;}
#about_lead p{ padding: 0.5em; text-align: center; font-size: 24px; font-weight: bold; line-height: 1.5em; letter-spacing: 0.1em; border-top: 2px solid #000; border-bottom: 2px solid #000;}


@media screen and (max-width:767px){
#about_lead{ margin:0 auto 7.5%;}
#about_lead dl{ display:block;}
#about_lead dl dt{ display:block; width:100%; text-align:center; margin-bottom:5%;}
#about_lead dl dt img{ width:66.66%;}
#about_lead dl dd{ display:block; padding:0;}
#about_lead h2{ font-size:6vw; letter-spacing:0.05em; padding: 0.5em 0; margin-bottom:2.5%;}
#about_lead p{ padding:2.5vw 0; font-size:4.5vw;}
#about_lead p:before{ height:0.66vw;}
#about_lead p:after{ height:0.66vw;}
}
#about01{ margin: 40px auto;}
#about01 h3{ text-align: center; margin-bottom: 20px; overflow: hidden;}
#about01 h3 strong{ display: inline-block; position: relative; font-size: 42px; line-height: 1em; color: #ce0646;}
#about01 h3 strong:before{ content: ""; width: 480px; height: 2px; background: #ce0646; position: absolute; left: -500px; top: calc(50% - 2px);}
#about01 h3 strong:after{ content: ""; width: 480px; height: 2px; background: #ce0646; position: absolute; right: -500px; top: calc(50% - 2px);}
#about01 .about01_txt{ width: 840px; margin: 0 auto; border: 1px solid #ce0646; background: #fff; padding: 1em; position: relative; box-shadow:rgba(0, 0, 0, 0.1) 0 0 2px 1px;}
#about01 .about01_txt p{ text-align: center; color: #ce0646;}
#about01 .about01_txt:before{ content: ""; position: absolute; left: 0; top: 0;width: 0; height: 0; border-style: solid; border-width: 18px 18px 0 0; border-color: #ce0645 transparent transparent transparent;}
#about01 .about01_txt:after{ content: ""; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 18px 18px 0; border-color: transparent #ce0645 transparent transparent;}
#about01 .about01_txt p:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 18px 0 0 18px; border-color: transparent transparent transparent #ce0645;}
#about01 .about01_txt p:after{ content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 18px 18px; border-color: transparent transparent #ce0645 transparent;}
@media screen and (max-width:767px){
#about01{ margin:7.5% auto;}
#about01 h3{ margin-bottom:2.5%;}
#about01 h3 strong{ font-size:6vw;}
#about01 h3 strong:before{ width:50vw; height:0.66vw; left:-52.5vw; top:calc(50% - 0.33vw);}
#about01 h3 strong:after{ width:50vw; height:0.66vw; right:-52.5vw; top:calc(50% - 0.33vw);}
#about01 .about01_txt{ width:100%;}
#about01 .about01_txt p{ text-align:left;}
#about01 .about01_txt:before{ border-width:1em 1em 0 0;}
#about01 .about01_txt:after{ border-width:0 1em 1em 0;}
#about01 .about01_txt p:before{ border-width:1em 0 0 1em;}
#about01 .about01_txt p:after{ border-width:0 0 1em 1em;}
}
#about02{ margin: 40px auto 0;}
#about02 h3{ text-align: center; margin-bottom: 20px; overflow: hidden;}
#about02 h3 strong{ display: inline-block; position: relative; font-size: 42px; line-height: 1em; color: #0068b6;}
#about02 h3 strong:before{ content: ""; width: 480px; height: 2px; background: #0068b6; position: absolute; left: -500px; top: calc(50% - 2px);}
#about02 h3 strong:after{ content: ""; width: 480px; height: 2px; background: #0068b6; position: absolute; right: -500px; top: calc(50% - 2px);}
#about02 table{ width: 840px; margin: 0 auto; border-collapse: separate; border-spacing: 0 0.5em;}
#about02 table th{ background: #0068b6; color: #fff; width: 80px; padding: 0.5em; text-align: center; box-shadow:rgba(0, 0, 0, 0.1) 0 0 2px 1px;}
#about02 table td{ background: #e9f2fa; color: #0068b6; border: 1px solid #0068b6; padding: 0.5em 1em; box-shadow:rgba(0, 0, 0, 0.1) 0 0 2px 1px;}
@media screen and (max-width:767px){
#about02{ margin:7.5% auto 0;}
#about02 h3{ margin-bottom:2.5%;}
#about02 h3 strong{ font-size:6vw;}
#about02 h3 strong:before{ width:50vw; height:0.66vw; left:-52.5vw; top:calc(50% - 0.33vw);}
#about02 h3 strong:after{ width:50vw; height:0.66vw; right:-52.5vw; top:calc(50% - 0.33vw);}
#about02 table{ width:100%; border-spacing:0 0.5em;}
#about02 table th{ bwidth:4em; vertical-align:middle;}
#about02 table td{ vertical-align:middle; font-size:3vw;}
}


/*５つの理由*/
#reason{ background: rgba(237,33,0,0.1);}
#reason_in{ display: table; table-layout: fixed; width: 100%;}
#reason_in figure.reason_img{ display: table-cell; vertical-align: middle; width: 360px; text-align: left;}
#reason_in #reason_list{ display: table-cell; vertical-align: middle;}
#reason_in #reason_list dl{ margin: 20px 0 20px 140px; text-align: center; position: relative; box-shadow:rgba(0, 0, 0, 0.1) 0 0 5px 2px;}
#reason_in #reason_list dl:nth-child(2n+1){ margin: 20px 140px 20px 0;}
#reason_in #reason_list dl dt{ background: #ed2100; color: #fff; padding: 0.5em; font-size: 24px;}
#reason_in #reason_list dl dd{ display: flex; align-items: center; justify-content: center; min-height: 3.5em; padding: 0.5em; background: #fff; color: #ed2100;}
#reason_in #reason_list dl dd p{ font-size: 20px; line-height: 1.5em;}
@media screen and (max-width:767px){
#reason_in{ display:block;}
#reason_in figure.reason_img{ display:block; width:100%;; text-align:center;}
#reason_in figure.reason_img img{ width:33.33%;}
#reason_in #reason_list{ display:block;}
#reason_in #reason_list dl{ margin:10vw 0 10vw 17.5vw;}
#reason_in #reason_list dl:nth-child(2n+1){ margin:10vw 17.5vw 10vw 0;}
#reason_in #reason_list dl dt{ font-size:4vw; display: flex; align-items: center; justify-content: center; min-height:14vw;}
#reason_in #reason_list dl:last-child dt h3{ font-size:3.5vw; line-height:1.5em;}
#reason_in #reason_list dl dd{ display: flex; align-items: center; justify-content: center; min-height: 3.5em;}
#reason_in #reason_list dl dd p{ font-size:3.5vw;}
}
#reason_in #reason_list dl:after{ content: ""; width: 120px; height: 120px; position: absolute; right: -140px; top: 50%; transform: translateY(-50%); border: 4px solid #ed2100; border-radius: 50%; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#reason_in #reason_list dl:nth-child(2n):after{ right: auto; left: -140px;}
#reason_in #reason_list dl:nth-child(1):after{ background: url("../images/reason01.jpg") center center no-repeat; background-size: 100%;}
#reason_in #reason_list dl:nth-child(2):after{ background: url("../images/reason02.jpg") center center no-repeat; background-size: 100%;}
#reason_in #reason_list dl:nth-child(3):after{ background: url("../images/reason03.jpg") center center no-repeat; background-size: 100%;}
#reason_in #reason_list dl:nth-child(4):after{ background: url("../images/reason04.jpg") center center no-repeat; background-size: 100%;}
#reason_in #reason_list dl:nth-child(5):after{ background: url("../images/reason05.jpg") center center no-repeat; background-size: 100%;}
@media screen and (max-width:767px){
#reason_in #reason_list dl:after{ width:25vw; height:25vw; right:-17.5vw; top:-7.5vw; transform: translateY(0); border:0.75vw solid #ed2100;}
#reason_in #reason_list dl:nth-child(2n):after{ left:-17.5vw;}
}


/*ラインナップ*/
#lineup{ background: #fff;}
#lineup h2 .point{ margin: 0.25em auto 0;}
#lineup_lead{ width: 1100px; margin: 0 auto; padding: 40px 0 60px;}
#lineup_lead ul{ width: calc(100% + 12px); margin-left: -6px; letter-spacing: -1em;}
#lineup_lead ul li{ display: inline-block; vertical-align: top; width: calc(16.66% - 12px); letter-spacing: 0; margin: 0 6px; text-align: center;}
#lineup_lead ul li a{ display: block; border: 4px solid #000; background: #efefef; position: relative; transition: 0.3s;}
#lineup_lead ul li a:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 50px 0 50px; border-color: #000 transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -20px; margin: auto; transition: 0.3s;}
#lineup_lead ul li a:hover{ opacity: 0.7;}
#lineup_lead ul li a:hover:after{ bottom: -26px;}
#lineup_lead ul li h3{ background: #000; color: #fff; padding: 0.25em 0;}
#lineup_lead ul li figure{ margin: 4px;}
#lineup_lead ul li h4{ background: #000; color: #fff; padding: 0.33em 0.25em 0.25em; font-size: 15px;}
#lineup_lead ul li h4 strong{ display: block; background: #fff; color: #000; font-size: 16px; padding: 0.125em; margin-bottom: 0.25em; border-radius: 1em;}
@media screen and (max-width:767px){
#lineup_lead{ width:95%; padding:7.5% 0 5%;}
#lineup_lead ul{ width:calc(100% + 2.5vw); margin-left:-1.25vw;}
#lineup_lead ul li{ width:calc(33.33% - 2.5vw); margin:0 1.25vw 7.5vw;}
#lineup_lead ul li a{ border:0.66vw solid #000;}
#lineup_lead ul li a:after{ border-width:2.5vw 6.66vw 0 6.66vw; bottom:-5vw;}
#lineup_lead ul li a:hover:after{ bottom:-5vw;}
#lineup_lead ul li h3{ font-size:3.2vw; letter-spacing:0;}
#lineup_lead ul li figure{ margin:1.25%;}
#lineup_lead ul li h4{ padding: 0.33em 0.25em 0.25em; font-size:2.75vw; letter-spacing:0;}
#lineup_lead ul li h4 strong{ font-size:3vw;}
}
#lineup_lead ul li:nth-child(1) a{ border-color: #a9559c; background: rgba(169,85,156,0.2);}
#lineup_lead ul li:nth-child(1) a:after{ border-color: #a9559c transparent transparent transparent;}
#lineup_lead ul li:nth-child(1) h3{ background: #a9559c;}
#lineup_lead ul li:nth-child(1) h4{ background: #a9559c;}
#lineup_lead ul li:nth-child(1) h4 strong{ color: #a9559c;}
#lineup_lead ul li:nth-child(2) a{ border-color: #0068b6; background: rgba(0,104,182,0.2);}
#lineup_lead ul li:nth-child(2) a:after{ border-color: #0068b6 transparent transparent transparent;}
#lineup_lead ul li:nth-child(2) h3{ background: #0068b6;}
#lineup_lead ul li:nth-child(2) h4{ background: #0068b6;}
#lineup_lead ul li:nth-child(2) h4 strong{ color: #0068b6;}
#lineup_lead ul li:nth-child(3) a{ border-color: #ce0646; background: rgba(206,6,70,0.2);}
#lineup_lead ul li:nth-child(3) a:after{ border-color: #ce0646 transparent transparent transparent;}
#lineup_lead ul li:nth-child(3) h3{ background: #ce0646;}
#lineup_lead ul li:nth-child(3) h4{ background: #ce0646;}
#lineup_lead ul li:nth-child(3) h4 strong{ color: #ce0646;}
#lineup_lead ul li:nth-child(4) a{ border-color: #f29600; background: rgba(242,150,0,0.2);}
#lineup_lead ul li:nth-child(4) a:after{ border-color: #f29600 transparent transparent transparent;}
#lineup_lead ul li:nth-child(4) h3{ background: #f29600;}
#lineup_lead ul li:nth-child(4) h4{ background: #f29600;}
#lineup_lead ul li:nth-child(4) h4 strong{ color: #f29600;}
/*PC*/
#lineup_lead ul li:nth-child(5) a{ border-color: #e85f9d; background: rgba(232,95,157,0.2);}
#lineup_lead ul li:nth-child(5) a:after{ border-color: #e85f9d transparent transparent transparent;}
#lineup_lead ul li:nth-child(5) h3{ background: #e85f9d;}
#lineup_lead ul li:nth-child(5) h4{ background: #e85f9d;}
#lineup_lead ul li:nth-child(5) h4 strong{ color: #e85f9d;}
#lineup_lead ul li:nth-child(6) a{ border-color: #404040; background: rgba(64,64,64,0.2);}
#lineup_lead ul li:nth-child(6) a:after{ border-color: #404040 transparent transparent transparent;}
#lineup_lead ul li:nth-child(6) h3{ background: #404040;}
#lineup_lead ul li:nth-child(6) h4{ background: #404040;}
#lineup_lead ul li:nth-child(6) h4 strong{ color: #404040;}
/*sp*/
#lineup_lead ul li:nth-child(7) a{ border-color: #e85f9d; background: rgba(232,95,157,0.2);}
#lineup_lead ul li:nth-child(7) a:after{ border-color: #e85f9d transparent transparent transparent;}
#lineup_lead ul li:nth-child(7) h3{ background: #e85f9d;}
#lineup_lead ul li:nth-child(7) h4{ background: #e85f9d;}
#lineup_lead ul li:nth-child(7) h4 strong{ color: #e85f9d;}
#lineup_lead ul li:nth-child(8) a{ border-color: #404040; background: rgba(64,64,64,0.2);}
#lineup_lead ul li:nth-child(8) a:after{ border-color: #404040 transparent transparent transparent;}
#lineup_lead ul li:nth-child(8) h3{ background: #404040;}
#lineup_lead ul li:nth-child(8) h4{ background: #404040;}
#lineup_lead ul li:nth-child(8) h4 strong{ color: #404040;}

#lineup_list dl{ background: #000; display: flex; justify-content: center;}
#lineup_list dl dt{ display: flex; align-items: center; justify-content: center; width: 550px; text-align: center; padding: 0;}
#lineup_list dl dt img{ width: 100%; /*box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;*/}
#lineup_list dl dd{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 550px; background: #1c0422; color: #fff; padding: 20px;}
#lineup_list dl dd h3{ text-align: center; margin-bottom: 20px;}
#lineup_list dl dd h3 img{ height: 60px;}
#lineup_list dl dd h4{ width: 100%; text-align: center; font-size: 21px; margin-bottom: 10px; overflow: hidden;}
#lineup_list dl dd h4 strong{ display: inline-block; position: relative;}
#lineup_list dl dd h4 strong:before{ content: ""; width: 480px; height: 2px; background: #fff; position: absolute; left: -500px; top: calc(50% - 1px);}
#lineup_list dl dd h4 strong:after{ content: ""; width: 480px; height: 2px; background: #fff; position: absolute; right: -500px; top: calc(50% - 1px);}
#lineup_list dl dd p{ font-size: 15px; line-height: 1.5em; margin-bottom: 20px;}
#lineup_list dl dd p span{ display: block; font-size: 80%; line-height: 1.5em; margin-top: 1em;}
#lineup_list dl dd ul{ letter-spacing: -1em; width: calc(100% + 20px); margin-left: -10px; text-align: center;}
#lineup_list dl dd ul li{ display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 0 10px;}
#lineup_list dl:nth-child(2n){ flex-direction: row-reverse;}
#lineup_list dl:nth-child(2n) dt{ padding: 0;}
@media screen and (max-width:767px){
#lineup_list dl{ display:block; height:auto;}
#lineup_list dl dt{ display:block; width:100%; padding:0;}
#lineup_list dl dt img{ width: 100%;}
#lineup_list dl dd{display:block; width:100%; padding:5%;}
#lineup_list dl dd h3{ margin-bottom:5%;}
#lineup_list dl dd h3 img{ height:10vw;}
#lineup_list dl dd h4{ font-size:4vw; margin-bottom:2.5%;}
#lineup_list dl dd h4 strong:before{ width:50vw; left:-52.5vw;}
#lineup_list dl dd h4 strong:after{ width:50vw; right:-52.5vw;}
#lineup_list dl dd p{ font-size:3vw; margin-bottom:5%;}
#lineup_list dl dd ul{ width:calc(100% + 1.5vw); margin-left:-0.75vw;}
#lineup_list dl dd ul li{ width:calc(33.33% - 1.5vw); margin:0 0.75vw;}
#lineup_list dl:nth-child(2n) dt{ padding:0;}
}

#lineup_list dl#lineup02{
background: rgb(159,197,233);
background: -moz-linear-gradient(left,  rgba(159,197,233,1) 0%, rgba(0,104,182,1) 100%);
background: -webkit-linear-gradient(left,  rgba(159,197,233,1) 0%,rgba(0,104,182,1) 100%);
background: linear-gradient(to right,  rgba(159,197,233,1) 0%,rgba(0,104,182,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fc5e9', endColorstr='#0068b6',GradientType=1 );
}
#lineup_list dl#lineup02 dd{ background: #0068b6;}
#lineup_list dl#lineup03{
background: rgb(206,6,70);
background: -moz-linear-gradient(left,  rgba(206,6,70,1) 0%, rgba(234,180,214,1) 100%);
background: -webkit-linear-gradient(left,  rgba(206,6,70,1) 0%,rgba(234,180,214,1) 100%);
background: linear-gradient(to right,  rgba(206,6,70,1) 0%,rgba(234,180,214,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0646', endColorstr='#eab4d6',GradientType=1 );
}
#lineup_list dl#lineup03 dd{ background: #ce0646;}

#lineup_list dl#lineup04{
background: rgb(227,223,149);
background: -moz-linear-gradient(left,  rgba(227,223,149,1) 0%, rgba(255,185,1,1) 100%);
background: -webkit-linear-gradient(left,  rgba(227,223,149,1) 0%,rgba(255,185,1,1) 100%);
background: linear-gradient(to right,  rgba(227,223,149,1) 0%,rgba(255,185,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3df95', endColorstr='#ffb901',GradientType=1 );
}
#lineup_list dl#lineup04 dd{ background: #ffb901;}
@media screen and (max-width:767px){
}



#lineup_list2{ position: relative; z-index: 1;}
#lineup_list2:before{ content: ""; display: block; width: 50%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;
background: rgb(223,75,163);
background: -moz-linear-gradient(left,  rgba(223,75,163,1) 0%, rgba(250,219,236,1) 100%);
background: -webkit-linear-gradient(left,  rgba(223,75,163,1) 0%,rgba(250,219,236,1) 100%);
background: linear-gradient(to right,  rgba(223,75,163,1) 0%,rgba(250,219,236,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df4ba3', endColorstr='#fadbec',GradientType=1 );}
#lineup_list2:after{ content: ""; display: block; width: 50%; height: 100%; position: absolute; right: 0; top: 0; z-index: -1;
background: rgb(209,208,208);
background: -moz-linear-gradient(left,  rgba(209,208,208,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(209,208,208,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to right,  rgba(209,208,208,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d0d0', endColorstr='#000000',GradientType=1 );}
#lineup_list2 .maincontent{ display:flex;}
#lineup_list2 #lineup_list2_1{ width: 550px; background: #df4ba3; padding: 25px;}
#lineup_list2 #lineup_list2_2{ width: 550px; background: #000; padding: 25px;}
#lineup_list2 figure{ margin-bottom: 20px;}
#lineup_list2 h3{ text-align: center; margin-bottom: 20px;}
#lineup_list2 ul{ width: calc(100% + 4px); margin-left: -2px; text-align: center; letter-spacing: -1em;}
#lineup_list2 ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin: 0 2px;}
@media screen and (max-width:767px){
#lineup_list2{ position: static;}
#lineup_list2:before{ display: none;}
#lineup_list2 .maincontent{ display:block; width:100%;}
#lineup_list2 #lineup_list2_1{ width:100%; padding:5%;}
#lineup_list2 #lineup_list2_2{ width:100%; padding:5%;}
#lineup_list2 figure{ margin-bottom:2.5%;}
#lineup_list2 h3{ margin-bottom:2.5%;}
#lineup_list2 h3 img{ height:10vw;}
#lineup_list2 ul{ width:calc(100% + 2.5vw); margin-left:-1.25vw;}
#lineup_list2 ul li{ width:calc(40% - 2.5vw); margin:0 1.25vw;}
}


/*こだわり*/
#commit{
background: rgb(206,6,70);
background: -moz-linear-gradient(left,  rgba(206,6,70,0.1) 0%, rgba(0,100,217,0.1) 100%);
background: -webkit-linear-gradient(left,  rgba(206,6,70,0.1) 0%,rgba(0,100,217,0.1) 100%);
background: linear-gradient(to right,  rgba(206,6,70,0.1) 0%,rgba(0,100,217,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0646', endColorstr='#0064d9',GradientType=1 );
}
@media screen and (max-width:767px){
#commit h2{ font-size:5.75vw;}
}

#commit_lead{ padding: 40px 0;}
#commit_lead_tit{ position: relative; padding-bottom: 18px; font-size: 36px; text-align: center; margin-bottom: 40px;}
#commit_lead_tit:after{ content: ""; width: 100%; height: 8px; position: absolute; left: 0; bottom: 0;
background: rgb(206,6,70);
background: -moz-linear-gradient(left,  rgba(206,6,70,1) 0%, rgba(0,100,217,1) 100%);
background: -webkit-linear-gradient(left,  rgba(206,6,70,1) 0%,rgba(0,100,217,1) 100%);
background: linear-gradient(to right,  rgba(206,6,70,1) 0%,rgba(0,100,217,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0646', endColorstr='#0064d9',GradientType=1 );}
#commit_lead_tit .point{ display: block; color: #fff; font-size: 36px; padding: 0.25em; margin-bottom: 10px;
background: rgb(206,6,70);
background: -moz-linear-gradient(left,  rgba(206,6,70,1) 0%, rgba(0,100,217,1) 100%);
background: -webkit-linear-gradient(left,  rgba(206,6,70,1) 0%,rgba(0,100,217,1) 100%);
background: linear-gradient(to right,  rgba(206,6,70,1) 0%,rgba(0,100,217,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0646', endColorstr='#0064d9',GradientType=1 );}
#commit_lead_tit h3 strong{ font-size: 120%;}
#commit_lead_tit h3{
background: rgb(206,6,70);
background: -moz-linear-gradient(left,  rgba(206,6,70,1) 0%, rgba(0,100,217,1) 100%);
background: -webkit-linear-gradient(left,  rgba(206,6,70,1) 0%,rgba(0,100,217,1) 100%);
background: linear-gradient(to right,  rgba(206,6,70,1) 0%,rgba(0,100,217,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0646', endColorstr='#0064d9',GradientType=1 );
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
@media screen and (max-width:767px){
#commit_lead{ padding:7.5% 0;}
#commit_lead_tit{ padding-bottom:2.5vw; font-size:5vw; margin-bottom:7.5%;}
#commit_lead_tit:after{ height:0.66vw;}
#commit_lead_tit .point{ font-size:6vw; margin-bottom:1.25%;}
#commit_lead_tit h3 strong{ font-size: 120%;}
}

#commit_lead ul{ display: table; width: calc(100% + 40px); margin-left: -20px; border-collapse: separate; border-spacing: 20px 0;}
#commit_lead ul li{ display: table-cell; vertical-align: top; border: 4px solid #000; background: #fff; box-shadow:rgba(0, 0, 0, 0.1) 0 0 5px 2px;}
#commit_lead ul li dl dt{ background: #000; color: #fff; text-align: center; padding: 0.25em 0.25em 0.5em;}
#commit_lead ul li dl dt h4{ font-size: 36px;}
#commit_lead ul li dl dd{ padding: 20px; text-align: center;}
#commit_lead ul li dl dd figure{ margin-bottom: 20px;}
#commit_lead ul li dl dd figure img{ width: 160px;}
#commit_lead ul li dl dd p{ font-size: 21px; line-height: 1.5em;}
#commit_lead ul li:nth-child(1){ border-color: #ce0646;}
#commit_lead ul li:nth-child(1) dl dt{ background: #ce0646;}
#commit_lead ul li:nth-child(1) dl dd p{ color: #ce0646;}
#commit_lead ul li:nth-child(2){ border-color: #9a1e6b;}
#commit_lead ul li:nth-child(2) dl dt{ background: #9a1e6b;}
#commit_lead ul li:nth-child(2) dl dd p{ color: #9a1e6b;}
#commit_lead ul li:nth-child(3){ border-color: #354cb4;}
#commit_lead ul li:nth-child(3) dl dt{ background: #354cb4;}
#commit_lead ul li:nth-child(3) dl dd p{ color: #354cb4;}
#commit_lead ul li:nth-child(4){ border-color: #0064d9;}
#commit_lead ul li:nth-child(4) dl dt{ background: #0064d9;}
#commit_lead ul li:nth-child(4) dl dd p{ color: #0064d9;}
@media screen and (max-width:767px){
#commit_lead ul{ display:block; width:100%; margin:0 auto; border-collapse:collapse; border-spacing:0;}
#commit_lead ul li{ display:block; border:0.66vw solid #000; margin:2.5% auto;}
#commit_lead ul li dl dt{ width:100%;}
#commit_lead ul li dl dt h4{ font-size:4.5vw;}
#commit_lead ul li dl dd{ padding:2.5%; letter-spacing:-1em;}
#commit_lead ul li dl dd figure{ display:inline-block; vertical-align:middle; letter-spacing:0; width:15%; margin:0 2.5% 0 0;}
#commit_lead ul li dl dd figure img{ width:100%;}
#commit_lead ul li dl dd p{ display:inline-block; vertical-align:middle; letter-spacing:0; width:82.5%; font-size:3.5vw;}
}

.commit_list{ position: relative; border-top: 8px solid #000; overflow: hidden; z-index: 1;}
.commit_list dl{ padding-left: 550px; display: flex; align-items: center; height: 500px; position: relative;}
.commit_list dl dt .commit_list_tit{ margin-bottom: 40px; position: relative;}
.commit_list dl dt .commit_list_tit span{ display: inline-block; text-align: center; width: 160px; height: 160px; border: 4px solid #000; background: #000; border-radius: 50%; overflow: hidden; position: absolute; left: 0; top: 50%; transform: translateY(-50%); box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
.commit_list dl dt .commit_list_tit span strong{ display:flex; align-items: center; justify-content: center; color: #fff; height: 52px; font-size: 28px;}
.commit_list dl dt .commit_list_tit span figure{ display:flex; align-items: center; justify-content: center; background: #fff; height: 100px;}
.commit_list dl dt .commit_list_tit span figure img{ width: 80px;}
.commit_list dl dt .commit_list_tit h3{ display: flex; align-items: center; justify-content: center; text-align: center; background: #000; color: #fff; height: 120px; font-size: 32px; margin-left: 80px; padding-left: 80px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
.commit_list dl dt p{ font-size: 16px; border: 1px solid #000; background: #fff; line-height: 1.5em; padding: 1em; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
.commit_list dl dt p span{ display: block; font-size: 80%; line-height: 1.5em;}
.commit_list dl dd{ position: absolute; top: 0; left: -380px;}
.commit_list dl dd img{ width: 880px;}
@media screen and (max-width:767px){
.commit_list{border-top:1.25vw solid #000;}
.commit_list .maincontent{ width:100%;}
.commit_list dl{ padding-left:0; display:block; height:auto;}
.commit_list dl dt{ padding:7.5% 5% 5%;}
.commit_list dl dt .commit_list_tit{ margin-bottom:7.5%;}
.commit_list dl dt .commit_list_tit span{ width:22.5vw; height:22.5vw; border:0.75vw solid #000; left:-3.75vw;}
.commit_list dl dt .commit_list_tit span strong{ height:7.5vw; font-size:4vw;}
.commit_list dl dt .commit_list_tit span figure{ height:15vw; padding-bottom:1.5vw;}
.commit_list dl dt .commit_list_tit span figure img{ width:10vw;}
.commit_list dl dt .commit_list_tit h3{ height:17.5vw; font-size:6vw; margin-left:2.5vw; padding-left:15vw;}
.commit_list dl dd{ position:static;}
.commit_list dl dd img{ width:100%;}
}
.commit_list:nth-child(2n) dl{ padding-left: 0; padding-right: 550px;}
.commit_list:nth-child(2n) dl dd{ left: auto; right: -380px;}
.commit_list:nth-child(2n) dl dt .commit_list_tit span{ left: auto; right: 0;}
.commit_list:nth-child(2n) dl dt .commit_list_tit h3{ margin-left: 0; padding-left: 0; margin-right: 80px; padding-right: 80px;}
.commit_list:last-child dl dd{ right: -50px;}
.commit_list:last-child dl dd img{ width: 550px;}
@media screen and (max-width:767px){
.commit_list:nth-child(2n) dl{ padding-right:0;}
.commit_list:nth-child(2n) dl dt .commit_list_tit span{ right:-3.75vw;}
.commit_list:nth-child(2n) dl dt .commit_list_tit h3{ margin-right:2.5vw; padding-right:15vw;}
.commit_list:last-child dl dd img{ width:100%; padding: 0;}
}

#commit01.commit_list{ border-color: #ce0646; background: rgba(206,6,70,0.1);}
#commit01.commit_list:before{ content: ""; position: absolute; right: 0; top: 0; z-index: -1; width: 0; height: 0; border-style: solid; border-width: 0 250px 500px 0; border-color: transparent #ce0645 transparent transparent;}
#commit01.commit_list dl dt .commit_list_tit span{ border-color: #ce0646; background: #ce0646;}
#commit01.commit_list dl dt .commit_list_tit h3{ background: #ce0646;}
#commit01.commit_list dl dt p{ border-color: #ce0646; color: #ce0646;}
#commit02.commit_list{ border-color: #9a1e6b; background: rgba(154,30,107,0.1);}
#commit02.commit_list:before{ content: ""; position: absolute; left: 0; top: 0; z-index: -1;width: 0; height: 0; border-style: solid; border-width: 500px 250px 0 0; border-color: #9a1e6b transparent transparent transparent;}
#commit02.commit_list dl dt .commit_list_tit span{ border-color: #9a1e6b; background: #9a1e6b;}
#commit02.commit_list dl dt .commit_list_tit h3{ background: #9a1e6b;}
#commit02.commit_list dl dt p{ border-color: #9a1e6b; color: #9a1e6b;}
#commit03.commit_list{ border-color: #354cb4; background: rgba(53,76,180,0.1);}
#commit03.commit_list:before{ content: ""; position: absolute; right: 0; top: 0; z-index: -1; width: 0; height: 0; border-style: solid; border-width: 0 250px 500px 0; border-color: transparent #354cb4 transparent transparent;}
#commit03.commit_list dl dt .commit_list_tit span{ border-color: #354cb4; background: #354cb4;}
#commit03.commit_list dl dt .commit_list_tit h3{ background: #354cb4;}
#commit03.commit_list dl dt p{ border-color: #354cb4; color: #354cb4;}
#commit04.commit_list{ border-color: #0064d9; background: rgba(0,100,217,0.1);}
#commit04.commit_list:before{ content: ""; position: absolute; left: 0; top: 0; z-index: -1;width: 0; height: 0; border-style: solid; border-width: 500px 250px 0 0; border-color: #0064d9 transparent transparent transparent;}
#commit04.commit_list dl dt .commit_list_tit span{ border-color: #0064d9; background: #0064d9;}
#commit04.commit_list dl dt .commit_list_tit h3{ background: #0064d9;}
#commit04.commit_list dl dt p{ border-color: #0064d9; color: #0064d9;}
@media screen and (max-width:767px){
#commit01.commit_list:before{ border-width:0 33.33vw 75vw 0;}
#commit02.commit_list:before{ border-width:75vw 33.33vw 0 0;}
#commit03.commit_list:before{ border-width:0 33.33vw 75vw 0;}
#commit04.commit_list:before{ border-width:75vw 33.33vw 0 0;}
}


/*チャート*/
#chart{ background: #fff;}
#chart .maincontent{ width: 1200px; padding: 40px 0 80px;}
#chart_in dl{ display: flex; width: 100%;}
#chart_in dl dt{ width: 160px;}
#chart_in dl dt table{ width: 100%; border-collapse: collapse; border-spacing: 0; text-align: center; font-size: 15px; font-weight: 700; color: #000; background: #fff;}
#chart_in dl dt table th{ border: 2px solid #000; height: 80px; vertical-align: middle; position: relative; z-index: 1; overflow: hidden;}
#chart_in dl dt table th span:first-child{ position: absolute; right: 10px; top: 10px; color: #fff;}
#chart_in dl dt table th span:last-child{ position: absolute; left: 10px; bottom: 10px;}
#chart_in dl dt table th:before{ content: ""; z-index: -1; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 160px 80px 0; border-color: transparent #000000 transparent transparent;}
/*#chart_in dl dt table th:after{ content: ""; z-index: -1; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 80px 0 0 160px; border-color: transparent transparent transparent #fff;}*/
#chart_in dl dt table td{ border: 2px solid #000; height: 66px; vertical-align: middle; padding: 10px 0 10px 30px; position: relative;}
#chart_in dl dt table td span.ico{ width: 20px; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:767px){
#chart .maincontent{ width:100%; padding:5% 2.5%;}
#chart_in dl{ display: flex; width: 100%;}
#chart_in dl dt{ width:33vw;}
#chart_in dl dt table{ font-size:3vw;}
#chart_in dl dt table th{ border:1px solid #000; height:15vw;}
#chart_in dl dt table th span:first-child{ right:1.75vw; top:1.75vw;}
#chart_in dl dt table th span:last-child{ left:1.75vw; bottom:1.75vw;}
#chart_in dl dt table th:before{ border-width:0 30vw 15vw 0;}
/*#chart_in dl dt table th:after{ border-width:15vw 0 0 100%;}*/
#chart_in dl dt table td{ border:1px solid #000; height:15vw; padding:1.25vw 0 1.25vw 5vw;}
#chart_in dl dt table td span.ico{ width:3.75vw; left:1.25vw;}
}
#chart_in dl dd{ width: calc(100% - 160px); }
#chart_in dl dd table{ /*width: 100%;*/ table-layout: fixed; border-collapse: collapse; border-spacing: 0; font-size: 15px; font-weight: 500; color: #000; background: #fff;}
#chart_in dl dd table th:first-child,
#chart_in dl dd table td:first-child{ border-left: none;}
#chart_in dl dd table th{ border: 2px solid #000; height: 80px; vertical-align: middle; text-align: center; padding: 10px 30px 10px 0; font-weight: 700; position: relative; z-index: 1;}
#chart_in dl dd table th span{ display: block; font-size: 75%;}
#chart_in dl dd table th figure{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px;}
#chart_in dl dd table th:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
#chart_in dl dd table th:nth-child(1):before{ background: #f4ae7d;}
#chart_in dl dd table th:nth-child(2):before{ background: #f09dc1;}
#chart_in dl dd table th:nth-child(3):before{ background: #f9cb87;}
#chart_in dl dd table th:nth-child(4):before{ background: #808080;}
#chart_in dl dd table th:nth-child(5):before{ background: #87aad9;}
#chart_in dl dd table th:nth-child(6):before{ background: #999999;}
#chart_in dl dd table th:nth-child(7):before{ background: #f09dc1;}
#chart_in dl dd table td{ border: 2px solid #000; height: 66px; vertical-align: middle; padding:5px; font-size: 11px; text-align: center;}
#chart_in dl dd table td ul.star{ display: table; table-layout: fixed; width: 100%;}
#chart_in dl dd table td ul.star li{ display: table-cell; vertical-align: middle; padding: 0 2px;}
#chart_in dl dd table tr.review img{ width: 30px;}
@media screen and (max-width:767px){
#chart_in dl dd{ width:67vw; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom:2.5%; margin-bottom: 2.5%;}
#chart_in dl dd table{ width:400%; font-size:3vw;}
#chart_in dl dd table th{ border:1px solid #000; height:15vw; padding:1.25vw 5vw 1.25vw 0;}
#chart_in dl dd table th figure{ right:2.5vw; width:5vw;}
#chart_in dl dd table td{ border:1px solid #000; height:15vw; padding:1.25vw; font-size:2.5vw;}
#chart_in dl dd table td ul.star{ padding: 0 0.66vw;}
#chart_in dl dd table td ul.star li{ padding:0 0.66vw;}
#chart_in dl dd table tr.review img{ width:5vw;}
}


/*amazon_btn*/
figure.amazon_btn{ margin: 40px auto 80px;}
figure.amazon_btn img{ border-radius: 20px; border: 2px solid #232f3e; box-shadow:rgba(0, 0, 0, 0.2) 0 0 0.5em 0.25em;}
@media screen and (max-width:767px){
figure.amazon_btn{ margin:5% auto 10%;}
figure.amazon_btn img{ width:95%; border-radius:2.5vw;}
}


@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}