@charset "UTF-8";
/* ========================================================================

  /product/chikuwa/css/chikuwa.css

======================================================================== */
#chikuwa main { padding-top:130px; background-color:#2c538b; color:#ffffff; }
#chikuwa main * { word-break:normal; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chikuwa main { padding-top:calc(80/750*100vw); }
}
/* ============ tablet:vertical ============ */
@media screen and (max-width:768px){
}
/************************************************************************
  #main-image
************************************************************************/
#main-image { font-size:0; position:relative; z-index:1; }
#main-image h1 { margin:0; padding:calc(520/1200*100vw) 0 0; width:100%; background:url('../images/main_image.png') no-repeat #2c538b; background-size:100% auto; box-sizing:border-box; }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#main-image h1 { background-image:url('../images/main_image@2x.png'); }
}
/* ============ tablet:vertical ============ */
@media screen and (max-width:768px){
#main-image { padding-top:calc(120/750*100vw); }
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#main-image { padding-top:calc(120/750*100vw); }
#main-image h1 { padding-top:0; height:calc(395/750*100vw); background-image:url('../images/main_image_sp.png'); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#main-image h1 { background-image:url('../images/main_image_sp@2x.png'); }
}
}
/************************************************************************
  #lead
************************************************************************/
#lead { margin-bottom:calc(-80/1200*100vw); padding:70px 0 60px; background:url('../images/bg_lead.png'); background-size:100% auto; position:relative; top:calc(-80/1200*100vw); }
#lead p { color:#ffffff; line-height:calc(36/19); text-align:center; font-weight:bold; font-size:20px; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#lead { background-image:url('../images/bg_lead@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#lead { margin-bottom:calc(-90/750*100vw); padding:calc(110/750*100vw) 0 calc(80/750*100vw); background-image:url('../images/bg_lead_sp.png'); top:calc(-90/750*100vw); }
#lead p { line-height:calc(48/28); font-weight:normal; font-size:calc(28/750*100vw); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#lead { background-image:url('../images/bg_lead_sp@2x.png'); }
}
}
/************************************************************************
  #episode
************************************************************************/
#episode { padding-bottom:135px; }
#episode article { margin:auto; width:1045px; height:550px; background:url('../images/bg_episode.png') no-repeat; background-size:100% auto; position:relative; right:-23px; left:23px; display:flex; align-items:center; }
#episode article h2 { margin-bottom:30px; line-height:0; font-size:0; }
#episode article .text { order:2; width:540px; }
#episode article .text p { color:#000000; line-height:calc(30/16); font-size:16px; }
#episode article .photo { order:1; margin-right:30px; position:relative; left:-10px; }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#episode article { background-image:url('../images/bg_episode@2x.png'); }
}

/* ============ tablet:vertical ============ */
@media screen and (max-width:768px){
#episode article { margin:auto calc(20/768*100vw); width:auto; height:calc((550/1.4)/768*100vw); right:calc((-23/1.4)/768*100vw);
 left:calc((23/1.4)/768*100vw); }
#episode article h2 { width:calc((1051/2.8)/768*100vw); }
#episode article .text { width:calc((540/1.4)/768*100vw); }
#episode article .text p { font-size:14px; }
#episode article .text br { display:none; }
#episode article .photo { width:calc((764/3.5)/768*100vw); }
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#episode { padding-bottom:calc(110/750*100vw); }
#episode article { padding-top:calc(65/750*100vw); width:calc(710/750*100vw); height:calc(1327/750*100vw); background-image:url('../images/bg_episode_sp.png'); flex-direction:column; right:calc(-10/750*100vw); left:calc(10/750*100vw); }
#episode article h2 { margin:auto auto calc(30/750*100vw); width:calc(420/750*100vw); }
#episode article .text { order:1; margin-bottom:calc(20/750*100vw); width:calc(580/750*100vw); }
#episode article .text p { line-height:calc(52/32); font-size:calc(32/750*100vw); }
#episode article .photo { order:2; margin:0 auto; width:calc(453/750*100vw); right:calc(-35/750*100vw); left:calc(35/750*100vw); }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#episode article { background-image:url('../images/bg_episode_sp@2x.png'); }
}
}
/************************************************************************
  #history
************************************************************************/
#history { padding:0 0 190px; }
#history h2 { margin-bottom:110px; text-align:center; }

/* dl */
#history dl { margin:auto; padding-bottom:90px; width:950px; }
#history dl dt { margin-top:calc(70px + 40px); margin-bottom:45px; }
#history dl dd { margin-bottom:45px; display:flex; }
#history dl dd .text { order:2; }
#history dl dd .photo { order:1; width:440px; text-align:center; }

#history dl dd .text h3 { margin-bottom:20px; font-feature-settings:'palt'; font-size:28px; }
#history dl dd .text h3::after { content:''; margin-top:10px; width:445px; height:5px; background:url('../images/h3_border.png') no-repeat; background-size:100% auto; display:block; }
#history dl dd .text h3 span { font-size:14px; display:block; }
#history dl dd .text p { line-height:calc(26.06/18); font-weight:bold; font-size:18px; }

#history dl dd { position:relative; }
#history dl dd::before { content:''; background-repeat:no-repeat; background-size:100% auto; display:block; position:absolute; right:0; }
#history-200703::before { width:178px; height:140px; background-image:url('../images/note_200703.png'); top:-80px; }
#history-201911::before { width:200px; height:236px; background-image:url('../images/note_201911.png'); top:-230px; }
#history-202309::before { width:216px; height:216px; background-image:url('../images/note_202309.png'); bottom:-75px; }

/* .note */
#history dl dd p.note { text-align:left; }
#history dl dd p.note small { font-size:14px; font-size:1.4rem; }

/* sup */
#history dl dd sup { font-size:12px; font-size:1.2rem; vertical-align:super; }

/* .box */
#history dl dd .box { margin-top:15px; padding:20px; background-color:#ffffff; color:#2c538b; border-radius:10px; text-align:center; }
#history dl dd .box p.txt { font-size:18px; font-size:1.8rem; }
#history dl dd .box p.txt sup { font-size:12px; font-size:1.2rem; vertical-align: super; }
#history dl dd .box p.txt strong { font-size:24px; font-size:2.4rem; }
#history dl dd .box p.txt strong span { font-size:28px; font-size:2.8rem; }
#history dl dd .box p.txt b { font-size:24px; font-size:2.4rem; }
#history dl dd .box p.note { text-align:center; }
#history dl dd .box p.note small { font-size:14px; font-size:1.4rem; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#history dl dd .text h3::after { background-image:url('../images/h3_border@2x.png'); }
#history-200703::before { background-image:url('../images/note_200703@2x.png'); }
#history-201911::before { background-image:url('../images/note_201911@2x.png'); }
#history-202309::before { background-image:url('../images/note_202309@2x.png'); }
}

/* ============ tablet:vertical ============ */
@media screen and (max-width:768px){
#history dl { margin:auto calc(20/768*100vw); width:auto; }
#history dl dd .photo { width:320px; }
#history dl dd .photo img { max-width:90%; }
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#history { padding-bottom:calc(225/750*100vw); }
#history h2 { margin:auto auto 0; width:calc(690/750*100vw); }

/* dl */
#history dl { margin:auto; padding-bottom:calc(60/750*100vw); width:calc(650/750*100vw); }
#history dl dt { margin-top:calc(140/750*100vw); margin-bottom:calc(65/750*100vw); }
#history dl dd { flex-direction:column; }
#history dl dd .text h3::after { margin-top:calc(20/750*100vw); width:calc(648/750*100vw); height:calc(5/750*100vw); background-image:url('../images/h3_border_sp.png'); }
#history dl dd .text h3 { margin-bottom:calc(35/750*100vw); font-size:calc(44/750*100vw); }
#history dl dd .text h3 span { font-size:calc(28/750*100vw); }
#history dl dd .text p { line-height:calc(52/32); font-size:calc(32/750*100vw); }

#history dl dd .photo { margin:auto auto calc(30/750*100vw); width:auto; }
#history dl dd .photo img { max-height:calc(450/750*100vw); max-height:calc(440/750*100vw); }

#history-200703::before { width:calc(253/750*100vw); height:calc(219/750*100vw); background-image:url('../images/note_200703_sp.png'); top:calc(-230/750*100vw); }
#history dl dd#history-201911::before { width:calc(298/750*100vw); height:calc(295/750*100vw); background-image:url('../images/note_201911_sp.png'); top:calc(-250/750*100vw); right:calc(-40/750*100vw); }
#history dl dd#history-202309::before { display:none; }
#history dl dd#history-202311::before { width:calc(324/750*100vw); height:calc(372/750*100vw); background-image:url('../images/note_202311_sp.png'); top:calc(-260/750*100vw); bottom:auto; right:calc(-40/750*100vw); }

/* .note */
#history dl dd p.note small { font-size:calc(24/750*100vw); }

/* sup */
#history dl dd sup { font-size:12px; font-size:1.2rem; vertical-align:super; }

/* .box */
#history dl dd .box { margin-top:15px; padding:calc(30/750*100vw); text-align:center; font-feature-settings:'palt'; }
#history dl dd .box p.txt { font-size:calc(30/750*100vw); white-space:nowrap; }
#history dl dd .box p.txt sup { font-size:calc(24/750*100vw); }
#history dl dd .box p.txt strong { font-size:calc(36/750*100vw); }
#history dl dd .box p.txt strong span { font-size:calc(36/750*100vw); }
#history dl dd .box p.txt b { font-size:calc(36/750*100vw); }
#history dl dd .box p.txt b br { display:none }
#history dl dd .box p.note { text-align:center; }
#history dl dd .box p.note small { font-size:calc(24/750*100vw); }


/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#history dl dd .text h3::after { background-image:url('../images/h3_border_sp@2x.png'); }
#history-200703::before { background-image:url('../images/note_200703_sp@2x.png'); }
#history-201911::before { background-image:url('../images/note_201911_sp@2x.png'); }
#history-202309::before { background-image:url('../images/note_202309_sp@2x.png'); }
#history dl dd#history-202311::before { background-image:url('../images/note_202311_sp@2x.png'); }
}
}
/************************************************************************
  .btn
************************************************************************/
a.btn { margin:auto; width:780px; height:88px; background:url('../images/btn_product.png') no-repeat; background-size:100% auto; color:#000000; line-height:1; font-weight:bold; font-size:28px; display:flex; justify-content:center; align-items:center; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
a.btn { background-image:url('../images/btn_product@2x.png'); }
}

/* ============ tablet:vertical ============ */
@media screen and (max-width:768px){
a.btn { margin:auto calc(20/768*100vw); width:auto; }
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
a.btn { width:calc(690/750*100vw); height:calc(110/750*100vw); background-image:url('../images/btn_product_sp.png'); font-size:calc(30/750*100vw); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
a.btn { background-image:url('../images/btn_product_sp@2x.png'); }
}
}
/************************************************************************
  #sns
************************************************************************/
#sns { background:url('../images/bg_sns.png') top left; background-size:auto 100%; position:relative; z-index:1; }
#sns .contents { height:360px; background:url('../images/bg_sns.png') top center; background-size:auto 100%; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; z-index:1; }
#sns::before { content:''; margin:auto; width:356px; height:139px; background:url('../images/sns_character.png') no-repeat; background-size:100% auto; display:block; position:absolute; z-index:-1; top:-100px; right:0; left:0; }
#sns h3 { margin-bottom:30px; color:#000000; line-height:calc(44/30); font-weight:bold; font-size:30px; }
#sns h3::before,
#sns h3::after { content:''; width:1px; height:35px; background-color:#000000; display:inline-block; vertical-align:middle; }
#sns h3::before { margin-right:1em; transform:rotate(-45deg); }
#sns h3::after { margin-left:1em; transform:rotate(45deg); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#sns, #sns .contents { background-image:url('../images/bg_sns@2x.png'); }
#sns::before { background-image:url('../images/sns_character@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#sns::before { width:calc(450/750*100vw); height:calc(185/750*100vw); top:calc(-120/750*100vw) }
#sns .contents { height:calc(385/750*100vw); background:url('../images/bg_sns.png') top center; }
#sns h3 { margin-bottom:calc(30/750*100vw); line-height:calc(52.8/36); font-size:calc(36/750*100vw); }
#sns h3::before,
#sns h3::after { width:calc(1/750*100vw); height:calc(42/750*100vw); }
#sns p a img { width:calc(86/750*100vw); }
}
/************************************************************************
  #love
************************************************************************/
#love { margin:auto; padding:0 0 200px; text-align:center; font-size:0; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#love { padding-bottom:calc(190/750*100vw); }
}