@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Murecho:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho+B1:wght@400;700;800&family=Shippori+Mincho:wght@400;600;700&family=Sorts+Mill+Goudy:ital@0;1&display=swap');
/* ========================================================================

  /product/snack/css/snack.css

======================================================================== */
* { margin:0; padding:0; }
hr { display:none; }

:root {
--noto-sans:"Noto Sans JP", sans-serif;
--noto-serif:"Noto Serif JP", serif;
--Shippori-Mincho:"Shippori Mincho B1", serif;
--Yu-Mincho:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
--m-plus-rounded-1c:"M PLUS Rounded 1c",sans-serif;
}
/************************************************************************
  #snack
************************************************************************/
#snack { background-image:none; }
/************************************************************************
  .breadcrumbs
************************************************************************/
nav.breadcrumbs { background-color:#ffffff;
    border-top:1px solid rgba(226, 226, 226, 0.9);
    border-bottom:1px solid rgba(226, 226, 226, 0.9);
    line-height:1;
    font-size:12px;
}
nav.breadcrumbs ul {
    margin:auto;
    padding:25px 0;
    max-width:1000px;
    display:flex
;
}
nav.breadcrumbs ul li {
    margin-right:3em;
    word-break:normal;
    white-space:nowrap;
}
nav.breadcrumbs ul li a {
    padding-bottom:2px;
    position:relative;
    display:block;
}
nav.breadcrumbs ul li a::before {
    content:'';
    width:0;
    height:1px;
    background-color:#333333;
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    opacity:0;
    transition:0.3s;
    transform-origin:left;
}
nav.breadcrumbs ul li a::after {
    content:'>';
    margin:auto;
    padding-bottom:2px;
    height:1em;
    display:inline-block;
    position:absolute;
    top:0;
    bottom:0;
    right:-2em;
}
nav.breadcrumbs ul li:last-child {
    margin-right:0;
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
nav.breadcrumbs { display:none; }
}
/************************************************************************
  main
************************************************************************/
#snack main { padding:100px 0 0; background-color:#dbe3e6; overflow:hidden; }
main h2 { text-align:center; position:relative; }
main h2::before, 
main h2::after { content:''; background-repeat:no-repeat; background-size:100% auto; position:absolute; z-index:1; }
main img { max-width:100%; }
.photo { font-size:0; }
.relative { position:relative; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#snack main { padding-top:calc(80/750*100vw); }
}
/************************************************************************
  #main-image
************************************************************************/
#main-image { height:calc(490/1100*100vw); background:url('../images/main_image.png') no-repeat center #dbe3e6; background-size:100% auto; font-size:0; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#main-image { background-image:url('../images/main_image@2x.png');}
}
@media screen and (min-width:1280px){
#main-image { height:calc(490/1360*100vw); }
}
/************************************************************************
  #lineup
************************************************************************/
#lineup { padding-bottom:200px; }
#lineup h2 { margin-bottom:65px; }
#lineup h2 img { width:min(469px, calc(469/1360*100vw)); }
/*
#lineup h2::before { width:min(160px, calc(160/1360*100vw)); height:min(164px, calc(164/1360*100vw)); background-image:url('../images/h2_lineup_b.png'); top:max(-13px, calc(-13/1360*100vw)); left:min(80px, calc(80/1360*100vw)); }
#lineup h2::after { width:min(128px, calc(128/1360*100vw)); height:min(177px, calc(177/1360*100vw)); background-image:url('../images/h2_lineup_a.png'); top:max(-28px, calc(-28/1360*100vw)); right:min(85px, calc(85/1360*100vw)); }
*/

#lineup h2::before { width:160px; height:164px; background-image:url('../images/h2_lineup_b.png'); top:-13px; left:80px; }
#lineup h2::after { width:128px; height:177px; background-image:url('../images/h2_lineup_a.png'); top:-28px; right:85px; }

/* .lineup */
#lineup .lineup { margin:0; padding:0; }
#lineup .lineup ul li { padding:20px 0; position:relative; }
#lineup .lineup ul li a img { width:150px; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#lineup h2::before { background-image:url('../images/h2_lineup_b@2x.png'); }
#lineup h2::after { background-image:url('../images/h2_lineup_a@2x.png'); }
}
/* ============ tablet ============ */
@media screen and (max-width:1040px){
#lineup .lineup ul { margin:0 25px; display:flex; flex-wrap:wrap; }

#lineup .lineup ul li { margin:0 10px 20px 10px; padding:20px 0 10px; background:#fff; border-radius:10px; flex-basis:219px; text-align:center; align-self:center; box-shadow:2px 2px 4px #EDECE7; align-self:stretch; }
#lineup .lineup ul li a img { width:150px; }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#lineup { padding-bottom:calc(120/750*100vw); }
#lineup h2 { margin-bottom:calc(280/750*100vw); }
#lineup h2 img { width:calc(703/750*100vw); }
#lineup h2::before { width:calc(211/750*100vw); height:calc(166/750*100vw); top:auto; bottom:calc(-210/750*100vw); left:calc(160/750*100vw); }
#lineup h2::after { width:calc(197/750*100vw); height:calc(218/750*100vw); top:auto; bottom:calc(-220/750*100vw); right:calc(180/750*100vw); }

/* .lineup */
#lineup .lineup ul { margin:0 25px; display:flex; flex-wrap:wrap; justify-content:space-between; }
#lineup .lineup ul li { margin:0 0 20px 0; padding:20px 0 10px; background:#fff; border-radius:10px; text-align:center; font-size:12px; display:block; box-shadow:2px 2px 4px #EDECE7; flex-basis:48%; align-self:stretch; position:relative; }
#lineup .lineup ul li img { margin:0 auto 5px auto; width:90% !important; text-align:center; display:block; }
#lineup .lineup ul li .item_title { margin:0 1rem; }
}
/************************************************************************
  .box
************************************************************************/
.box { padding:50px; background-color:#ffffff; border-radius:40px; position:relative; z-index:0; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
.box { padding:calc(60/750*100vw) calc(45/750*100vw); border-radius:calc(40/750*100vw); }
}
/************************************************************************
  .contents
************************************************************************/
.contents { margin:auto; max-width:1000px; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
.contents { margin:auto calc(30/750*100vw); }
}
/************************************************************************
  .bg
************************************************************************/
.bg { margin-top:calc(65/1100*100vw); background-color:rgba(115,179,4,0.9); }
.bg::before { content:''; margin-bottom:calc(-65/1100*100vw); width:100%; height:calc(65/1100*100vw); background:url('../images/bg_b.svg') no-repeat center bottom; background-size:100% auto; display:block; position:relative; top:calc(-65/1100*100vw); }
.bg::after { content:''; width:100%; height:calc(130/1100*100vw); background:url('../images/bg_a.png') no-repeat center bottom; background-size:100% auto; display:block; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
.bg::after { background-image:url('../images/bg_a@2x.png'); }
}
@media screen and (min-width:1280px){
#bg::before { height:calc(65/1360*100vw); top:calc(-65/1360*100vw); }
#bg::after { height:calc(130/1360*100vw); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
.bg { position:relative; }
.bg::after { height:calc(140/750*100vw); background-image:url('../images/bg_a_sp.png'); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
.bg::after { background-image:url('../images/bg_a_sp@2x.png'); }
}
}
/************************************************************************
  #historia
************************************************************************/
#historia h2 { margin-bottom:55px; }
#historia h2 img { width:min(371px, calc(371/1360*100vw)) }
/*
#historia h2::after { width:min(180px, calc(180/1360*100vw)); height:min(146px, calc(146/1360*100vw)); background-image:url('../images/h2_historia_a.png'); top:min(-36px, calc(-36/1360*100vw)); right:min(20px, calc(20/1360*100vw)); }
*/
#historia h2::after { width:180px; height:146px; background-image:url('../images/h2_historia_a.png'); top:-36px; right:20px; }

#historia ul { margin:auto auto max(-40px, calc(-40/1360*100vw)); padding:0; width:min(960px, calc(960/1360*100vw)); background:url('../images/bg_historia.svg') no-repeat center top; }
#historia ul::after { content:''; width:100%; height:min(567px, calc(567/1360*100vw)); background:url('../images/bg_historia_a.png') no-repeat; background-size:100% auto; display:block; }
#historia ul li { padding:0 0 min(40px, calc(40/1360*100vw)); width:min(370px, calc(370/1360*100vw)); font-feature-settings:'palt'; }
#historia ul li.right { margin-right:0; margin-left:auto; }
#historia ul li.left { margin-right:auto; margin-left:0; }
#historia ul li h3 { margin:0 0 min(calc(25/1360*100vw), 25px) max(calc(-15/1360*100vw), -15px); font-size:0; }
#historia ul li.left h3 { text-align:right; }
#historia ul li h3:before, 
#historia ul li h3:after { content:''; width:min(102px, calc(102/1360*100vw)); height:min(28px, calc(28/1360*100vw)); background-repeat:no-repeat; background-size:100% auto; display:inline-block; position:relative; }
#historia ul li.right h3:before { margin-right:max(calc((15 - 102)/1360*100vw), calc(15px - 102px)); background-image:url('../images/icon_right.svg'); left:max(-109px, calc(-109/1360*100vw)); }
#historia ul li.left h3:after { margin-left:max(calc(15px - 118px), calc((15 - 118)/1360*100vw)); background-image:url('../images/icon_left.svg'); right:max(-124px, calc(-124/1360*100vw));  }

#historia ul li h4 { margin-bottom:10px; line-height:1; font-weight:bold; font-size:22px; }
#historia ul li.left h4 { text-align:right; }
#historia ul li p.txt { margin-bottom:15px; font-size:16px; }
#historia ul li p.photo { margin-bottom:10px; text-align:center; }
#historia ul li p.note { margin-bottom:10px; }
#historia ul li p.note small { font-size:min(14px, calc(14/1360*100vw)); }

/* .memo */
#historia ul li .memo { margin:0; padding:0; }
#historia ul li .memo.open { background-color:#d8eeb4; }
#historia ul li .memo a { margin:0; padding:0; width:min(120px, calc(120/1360*100vw)); height:min(30px, calc(30/1360*100vw)); background:url('../images/open.svg') no-repeat; background-size:100% auto; display:inline-block; font-size:0; transition:0.5s; position:static; }
#historia ul li .memo.open a { background-image:url('../images/close.svg'); }
#historia ul li .memo p { padding:25px; display:none; font-size:16px; }

#y1976 { margin-top:max(-320px, calc(-320/1360*100vw)); margin-bottom:0; position:relative; }
#y1976:after { content:''; margin:min(110px, calc(110/1360*100vw)) 0 max(-180px, calc(-180/1360*100vw)); width:min(193px, calc(193/1360*100vw)); height:min(134px, calc(134/1360*100vw)); background:url('../images/y1976_a.png') no-repeat; background-size:100% auto; display:block; }
#y1984 .note { width:min(165px, calc(165/1360*100vw)); line-height:1.2; position:absolute; bottom:0; right:0; }
#y2002 { margin-top:-300px; margin-bottom:150px; }
#y2015 { margin-top:-160px; margin-bottom:-180px; }
#y2017 { margin-top:-200px; margin-bottom:30px; }
#y2021 { margin-top:-310px; margin-bottom:130px; }
#y2025 { margin-bottom:-240px; }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#historia h2::after { background-image:url('../images/h2_historia_a@2x.png'); }
#y1976:after { background-image:url('../images/y1976_a@2x.png'); }
}
/* ============ tablet ============ */
@media screen and (max-width:1040px){
#historia ul::after { margin-top:min(100px, calc(100/1360*100vw)); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#historia h2 { margin-bottom:calc(340/750*100vw); }
#historia h2 img { width:calc(558/750*100vw); }
#historia h2::after { margin:auto; width:calc(269/750*100vw); height:calc(218/750*100vw); top:auto; bottom:calc(-270/750*100vw); right:0; left:0; }

#historia ul { margin:auto auto -40px; width:auto; background-image:url('../images/bg_historia_sp.svg'); background-position:calc(25/750*100vw) calc(25/750*100vw); position:relative; z-index:0; }
#historia ul::after { margin-bottom:calc(-320/750*100vw); width:calc(750/750*100vw); height:calc(964/750*100vw); background-image:url('../images/bg_historia_a_sp.png'); position:relative; bottom:calc(450/750*100vw); left:calc(-30/750*100vw); z-index:-1; }
#historia ul li { margin:0 auto calc(70/750*100vw); width:calc(555/750*100vw); }
#historia ul li.right, 
#historia ul li.left { margin-right:auto; margin-left:calc(115/750*100vw); }
#historia ul li.left h3, 
#historia ul li.left h4 { text-align:left; }
#historia ul li h3 { margin:0 0 calc(35/750*100vw); }
#historia ul li.left h3,
#historia ul li.right h3 { left:calc(-50/750*100vw); position:relative; }
#historia ul li.left h3:before,
#historia ul li.right h3:before { margin-right:calc(10/750*100vw); margin-left:calc(-63/750*100vw); width:calc(93/750*100vw); height:calc(42/750*100vw); background-image:url('../images/icon_right_sp.svg'); left:calc(5/750*100vw); }
#historia ul li h3:after { display:none; }
#historia ul li h4 { font-size:calc(32/750*100vw); }
#historia ul li p.txt { font-size:calc(22/750*100vw); }
#historia ul li p.txt strong { line-height:calc(48/33); font-size:calc(32/750*100vw); }
#historia ul li p.note { line-height:calc(30/21); }
#historia ul li p.note small { font-size:calc(20/750*100vw); }

/* .memo */
#historia ul li .memo p { padding:calc(35/750*100vw); font-size:calc(22/750*100vw); }
#historia ul li .memo a { width:calc(180/750*100vw); height:calc(45/750*100vw); }

/* h3 img */
#y1975 h3 img { width:calc(154/750*100vw); }
#y1976 h3 img { width:calc(154/750*100vw); }
#y1984 h3 img { width:calc(160/750*100vw); }
#y2002 h3 img { width:calc(178/750*100vw); }
#y2012 h3 img { width:calc(159/750*100vw); }
#y2015 h3 img { width:calc(159/750*100vw); }
#y2016 h3 img { width:calc(159/750*100vw); }
#y2017 h3 img { width:calc(161/750*100vw); }
#y2018 h3 img { width:calc(161/750*100vw); }
#y2020 h3 img { width:calc(178/750*100vw); }
#y2021 h3 img { width:calc(158/750*100vw); }
#y2025 h3 img { width:calc(171/750*100vw); }

#y1976 { margin-top:0; }
#y1976:after { margin:0; width:calc(280/750*100vw); height:calc(201/750*100vw); position:absolute; right:calc(15/750*100vw); }
#y1984 .note { width:calc(215/750*100vw); }
}
/************************************************************************
  #charcter
************************************************************************/
#charcter { padding:165px 0 190px; }
#charcter h2 { margin-bottom:50px; }
#charcter h2 img { width:min(520px, calc(520/1360*100vw)) }
#charcter h2::before { width:160px; height:164px; background-image:url('../images/h2_character_b.png'); top:-65px; left:45px; }
#charcter h2::after { width:128px; height:177px; background-image:url('../images/h2_character_a.png'); top:-45px; right:60px; }

/* article */
#charcter article { background-color:#e9eef0; border-radius:20px; display:flex; justify-content:space-between; position:relative; }
#charcter article h3 { background-repeat:no-repeat; background-size:100% auto; font-size:0; position:relative; }

#charcter article#hasami-chan h3 { width:281px; height:379px; background-image:url('../images/h3_hasami_chan.png'); top:-25px; left:-30px; }
#charcter article#nnpa h3 { width:309px; height:333px; background-image:url('../images/h3_nnpa.png'); top:-20px; right:-20px; }

/* #hasami-chan */
#charcter article#hasami-chan { margin-bottom:40px; }
#charcter article#hasami-chan ul.disc { margin-right:40px; width:530px; }

/* #nnpa */
#charcter article#nnpa { position:relative; z-index:0; }
#charcter article#nnpa h3 { order:2; }
#charcter article#nnpa ul.disc { order:1; margin-left:calc(36px + 40px); width:530px; }

#charcter .box:before { content:''; margin:0 0 -61px; width:77px; height:61px; background:url('../images/bg_nnpa.png') no-repeat; background-size:100% auto; display:block; position:absolute; z-index:-1; bottom:125px; left:0; } 

#charcter article ul.disc { margin-left:36px; padding:40px 0 30px; color:#73b304; font-weight:700; font-family:var(--m-plus-rounded-1c); list-style:disc; }
#charcter article ul.disc li { line-height:36px; font-size:36px; align-items:center; }
/*#charcter article ul.disc li::before { content:'\025cf'; color:#73b304; font-size:14px; }*/
#charcter article ul.disc li p { color:#000000; line-height:36px; font-weight:700; font-size:22px; position:relative; top:-5px; font-feature-settings:'palt'; }
#charcter article ul.disc li p strong { color:#73b304; }

#charcter article ul.disc li p span { margin-right:5px; background-repeat:no-repeat; background-size:100% auto; display:inline-block; font-size:0; }
#charcter article ul.disc li p span.hasami-chan { width:138px; height:22px; background-image:url('../images/hasami_chan.svg'); }
#charcter article ul.disc li p span.nnpa { width:73px; height:24px; background-image:url('../images/nnpa.svg'); }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#charcter h2::before { background-image:url('../images/h2_character_b@2x.png'); }
#charcter h2::after { background-image:url('../images/h2_character_a@2x.png'); }
/* .box */
#charcter .box:before { background-image:url('../images/bg_nnpa@2x.png'); } 
/* article */
#charcter article#hasami-chan h3 { background-image:url('../images/h3_hasami_chan@2x.png'); }
#charcter article#nnpa h3 { background-image:url('../images/h3_nnpa@2x.png'); }
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#charcter { padding:calc(120/750*100vw) 0; }
#charcter h2 { margin-bottom:calc(150/750*100vw); }
#charcter h2 img { width:calc(616/750*100vw); height:calc(76/750*100vw); }
#charcter h2::before { width:calc(143/750*100vw); height:calc(147/750*100vw); top:auto; bottom:calc(-170/750*100vw); left:calc(215/750*100vw); }
#charcter h2::after { width:calc(115/750*100vw); height:calc(159/750*100vw); top:auto; bottom:calc(-185/750*100vw); right:calc(205/750*100vw); }
/* .box */
#charcter .box:before { margin-bottom:0; width:calc(74/750*100vw); height:calc(55/750*100vw); bottom:calc(80/750*100vw); left:calc(-8/750*100vw) } 
/* article */
#charcter article { padding:calc(25/750*100vw); flex-direction:column; }
#charcter article h3 { position:static; }
#charcter article ul.disc { margin-right:calc(40/750*100vw); padding:calc(25/750*100vw) 0; width:auto; }
#charcter article ul.disc li { font-size:calc(40/750*100vw); }
#charcter article ul.disc li p { line-height:calc(36/20); font-size:calc(20/750*100vw); }

/* #hasami-chan */
#charcter article#hasami-chan ul.disc { margin:auto auto auto calc(45/750*100vw); width:auto; }
#charcter article#hasami-chan h3 { background-size:100% auto; width:calc(346/750*100vw); height:calc(339/750*100vw); background-image:url('../images/h3_hasami_chan_sp.png'); }

/* #nnpa */
#charcter article#nnpa ul.disc { order:2; margin:auto auto auto calc(45/750*100vw); width:auto; }
#charcter article#nnpa h3 { order:1; margin:auto 0 auto auto; background-size:100% auto; width:calc(395/750*100vw); height:calc(263/750*100vw); background-image:url('../images/h3_nnpa_sp.png'); }

#charcter article ul.disc li p span { vertical-align:middle; }
#charcter article ul.disc li p span.hasami-chan { width:calc(138/750*100vw); height:calc(22/750*100vw); }
#charcter article ul.disc li p span.nnpa { width:calc(73/750*100vw); height:calc(24/750*100vw); }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#charcter article#nnpa h3 { background-image:url('../images/h3_nnpa_sp@2x.png'); }
}
}
/************************************************************************
  #interview
************************************************************************/
#interview { padding:0 0 190px;  }
#interview h2 { margin-bottom:40px; }
#interview h2 img { width:min(547px, calc(547/1360*100vw)); }
#interview h2::before { width:159px; height:123px; background-image:url('../images/h2_interview_b.png'); top:-30px; left:35px; }
#interview h2::after { width:116px; height:150px; background-image:url('../images/h2_interview_a.png'); top:-35px; right:15px; }

/* ul.accordion */
ul.accordion { padding-bottom:30px; }
ul.accordion li { margin-bottom:10px; background-color:#e9eef0; border-radius:10px; }
ul.accordion li h3 { padding:25px 30px; background-color:#73b304; color:#ffffff; border-radius:10px; line-height:1; font-weight:700; font-family:var(--m-plus-rounded-1c); font-size:24px; position:relative; }
ul.accordion li h3::after { content:''; margin:auto; width:32px; height:32px; background-repeat:no-repeat; background-image:url('../images/icon_plus.svg'); background-size:100% auto; display:block; position:absolute; top:0; bottom:0; right:20px; transition:0.5s; }
ul.accordion li.active h3::after { background-image:url('../images/icon_minus.svg'); }
ul.accordion li .text { padding:30px 30px 80px; display:none; }
ul.accordion li .text p.txt { font-size:16px; }
/* #interview-001 */
#interview-001 { margin-bottom:10px; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#interview h2::before { background-image:url('../images/h2_interview_b@2x.png'); }
#interview h2::after { background-image:url('../images/h2_interview_a@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#interview { padding-bottom:calc(180/750*100vw); }
#interview h2 { margin-bottom:calc(135/750*100vw); }
#interview h2 img { width:calc(697/750*100vw); height:calc(108/750*100vw); }
#interview h2::before { width:calc(142/750*100vw); height:calc(108/750*100vw); top:auto; bottom:calc(-150/750*100vw); left:calc(195/750*100vw); }
#interview h2::after { width:calc(104/750*100vw); height:calc(134/750*100vw); background-image:url('../images/h2_interview_a_sp.png'); top:auto; bottom:calc(-150/750*100vw); right:calc(224/750*100vw); }
/* ul.accordion */
ul.accordion { padding-bottom:calc(20/750*100vw); }
ul.accordion li { margin-bottom:calc(10/750*100vw); background-color:#e9eef0; border-radius:10px; }
ul.accordion li h3 { padding:calc(25/750*100vw) calc(50/750*100vw) calc(25/750*100vw) calc(30/750*100vw); border-radius:calc(10/750*100vw); font-size:calc(22/750*100vw); }
ul.accordion li h3::after { width:calc(32/750*100vw); height:calc(32/750*100vw); right:calc(15/750*100vw); }
ul.accordion li .text { padding:calc(35/750*100vw); }
ul.accordion li .text p.txt { font-size:calc(22/750*100vw); }

#interview-001 { margin-bottom:calc(30/750*100vw); }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#interview h2::after { background-image:url('../images/h2_interview_a_sp@2x.png'); }
}
}
/************************************************************************
  #tvcm
************************************************************************/
#tvcm { padding:0 0 160px; text-align:center; }
#tvcm h2 { margin-bottom:50px; }
#tvcm h2 img { width:min(327px, calc(327/1360*100vw)) }
#tvcm h2::before { width:152px; height:131px; background-image:url('../images/h2_tvcm_b.png'); top:-10px; left:125px; }
#tvcm h2::after { width:237px; height:141px; background-image:url('../images/h2_tvcm_a.png'); top:-10px; right:30px; }

#tvcm .box { padding-top:80px; display:flex; flex-direction:column; }
#tvcm .box h3 { order:2; font-weight:700; font-size:24px; }
#tvcm .box .movie { order:1; margin-bottom:30px; }
/* .movie */
.movie { margin:auto; width:675px; aspect-ratio:16/9; }
.movie iframe { width:100%; height:100%; border:0; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#tvcm h2::before { background-image:url('../images/h2_tvcm_b@2x.png'); }
#tvcm h2::after { background-image:url('../images/h2_tvcm_a@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#tvcm { padding:0 0 calc(90/750*100vw); }
#tvcm h2 { margin-bottom:calc(115/750*100vw); }
#tvcm h2 img { width:calc(419/750*100vw); height:calc(108/750*100vw); }
#tvcm h2::before { width:calc(94/750*100vw); height:calc(80/750*100vw); top:auto; bottom:calc(-120/750*100vw); left:calc(208/750*100vw); }
#tvcm h2::after { width:calc(191/750*100vw); height:calc(114/750*100vw); top:auto; bottom:calc(-125/750*100vw); right:calc(155/750*100vw); }
#tvcm .box { padding-top:calc(60/750*100vw); }
#tvcm .box h3 { font-size:calc(22/750*100vw); }
#tvcm .box .movie { margin-bottom:calc(25/750*100vw); }
/* .movie */
.movie { width:100%; }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
}
}
/************************************************************************
  #eco-link
************************************************************************/
body#snack #eco-link { margin-top:0; padding:70px 0 0; border:0; position:relative; }
body#snack #eco-link::before { content:''; margin:auto; width:170px; height:140px; background:url('../images/footer.gif') no-repeat; background-size:100%; display:block; position:absolute; top:-140px; right:0; left:0; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
body#snack #eco-link { padding-top:calc(30/750*100vw); }
body#snack #eco-link::before { width:calc(170/750*100vw); height:calc(140/750*100vw); top:calc(-140/750*100vw); }
}
/************************************************************************
  #footer
************************************************************************/
#footer #copyright, 
#footer a { color:#333333; }

#footer ul { width:auto; display:flex; }
#footer li { margin:0; }
#footer ul li::after { content:'\0002F'; margin:0 1em; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#footer { padding:calc(30/750*100vw) calc(30/750*100vw) calc(120/750*100vw); }
#footer ul { margin-bottom:0; padding:0; }
#footer li { width:auto; white-space:nowrap; }
#copyright { padding:calc(30/750*100vw) 0 0; }
}