/* IYHPの共通ヘッター、フッターなどの共通で使用するcssがcommonフォルダに格納されています。
https://www.itoyokado.co.jp/common/css/layout.css
https://www.itoyokado.co.jp/common/css/normalize.css
https://www.itoyokado.co.jp/common/css/theme.css
こちらのclass名と被らないようにネームをつけていただけますよう、よろしくお願いいたします。 */

#page{background-color:#b7e1fe;width:100%;text-align:center;}

/* 共通 */
.ct-wrap{margin:0 auto;}
.ct-wrap img{width:100%;height:auto;}

/* コンテンツセクション */
.section{margin:0 auto;background-color:#FFF;}

/* コラボレーション */
.collaboration{background-color:#FFF;}
.collaboration p{width:70.4%;max-width:528px;margin:0 auto;}

/* キービジュアル */
.kv{width:100%;max-width:980px;margin:0 auto;}
.kv:after{content:'';display:block;}
.kv h2{margin:0 auto;}

/* クエスチョン */
#question{width:100%;max-width:980px;margin:0 auto;}
#question:after{content:'';display:block;}
#question p{position:relative;}
#question p img{position:absolute;top:0;left:0;margin-top:0;z-index:2;}
#question p:after{content:'';display:block;position:relative;z-index:1;}

/* アンサー */
#answer{margin:0 auto;}
#answer .head{margin:0 auto;position:relative;}
#answer .head:before{content:'';position:absolute;width:15.246%;padding-top:15.246%;top:0;left:42.296%;margin-top:-8.525%;background:url("../img/answer-head.png") no-repeat center;background-size:100%;}
#answer .title{margin:0 auto;}
#answer .text{margin:0 auto;}
#answer .text p{color:#000;text-align:left;}
#answer .img{margin:0 auto;}
#answer .img:after{content:'';display:block;position:relative;z-index:1}

/* 知ってる？たんぱく質のこと */
#protein{overflow:hidden;margin:0 auto;}
#protein .title{background-color:#00a0e9;}
#protein .img{width:85.916%;margin:0 auto;}
#protein .img:after{content:'';display:block;position:relative;z-index:1;padding-top:10.656%;}
#protein .text{margin:0 auto 4.972%;}
#protein .text p{color:#000;text-align:left;}

/* 現代人はたんぱく質不足！！ */
#lack{overflow:hidden;margin:0 auto;}
#lack .title{background-color:#00a0e9;}
#lack .text{margin:0 auto;}
#lack .text p{color:#000;text-align:left;}
#lack .img{margin:0 auto;}
#lack .img:after{content:'';display:block;position:relative;z-index:1;padding-top:10.656%;}

/* そんな現代人のたんぱく質不足を補う商品が・・・ */
#compensate{margin:0 auto;}
#compensate .title{margin:0 auto;position:relative;}
#compensate .title:after{content:'';display:block;position:relative;z-index:1;padding-top:26.114%;}
#compensate .title img{position:absolute;width:100%;bottom:0;left:0;margin-top:0;z-index:2;}
#compensate-item{margin:0 auto;}
#compensate .text{width:85.916%;margin:0 auto 9.233%;}
#compensate .text p{color:#000;text-align:center;line-height:1.731em;}
#compensate .img{margin:0 auto;}
#compensate .img:after{content:'';display:block;position:relative;z-index:1;}

/* キャンペーン概要 */
#outline{margin:0 auto;}
#outline:before{content:'';display:block;position:relative;z-index:1;}
#outline .title{width:52.975%;margin:0 auto 5.666%;}
#outline .img{margin:0 auto;}
#outline .text{margin:0 auto;}
#outline .text p{color:#000;font-weight:bold;text-align:center;}
#outline .text ul{margin:0;padding:0;}
#outline .text ul li{display:inline-block;position:relative;padding-left:1em;list-style:none;color:#000;text-align:center;}
#outline .text ul li span{display:block;position:absolute;top:0;left:0;width:1em;text-align:center;}

/* そして、どれだけおトクになるかは・・・ */
#gain-title{margin:0 auto;}
#gain{margin:0 auto;}
#gain:before{content:'';display:block;position:relative;z-index:1;}
#gain .img{margin:0 auto;position:relative;}
#gain .text{margin:0 auto;position:relative;}
#gain .text:after{content:'';display:block;position:absolute;bottom:0;left:0;background:url("../img/gain-text.png") no-repeat center;background-size:100%;width:100%;}
#gain .text ul{margin:0;padding:0;}
#gain .text ul li{position:relative;padding-left:1em;list-style:none;color:#000;text-align:left;line-height:1.5em;}
#gain .text ul li span{display:block;position:absolute;top:0;left:0;width:1em;text-align:center;}
#gain .text p{color:#000;text-align:left;line-height:1.731em;}
#gain-exsample{margin:0 auto;}
#gain-result{margin:0 auto;}
#gain-result:after{content:'';display:block;position:relative;z-index:1;}

/* 対象商品 */
#target{margin:0 auto;}
#target .title{margin:0 auto;}
#target .img{margin:0 auto;}
#target .img:after{content:'';display:block;position:relative;z-index:1;}

/* 注意事項 */
#require{background-color:#00a0e9;}
#require:before{content:'';display:block;}
#require:after{content:'';display:block;}

.require-box{}

.require{margin:0 auto;}
.require:before{content:'';display:block;padding-top:5.972%;}
.require:after{content:'';display:block;padding-top:3.733%;}
.require h3{color:#FFF;font-weight:bold;line-height:1.5em;text-align:center;position:relative;display:inline-block;}
.require h3:before,
.require h3:after{content:'';display:block;position:absolute;top:0;background:url("../img/ico-require.png") no-repeat center;background-size:100%;}
.require h3:before{left:0;}
.require h3:after{right:0;}
.require h4{color:#FFF;text-align:left;}
.require p{color:#FFF;text-align:left;}
.require ul{margin:0;padding:0;}
.require ul li{position:relative;padding-left:1em;text-align:left;list-style:none;color:#FFF;}
.require ul li span{display:block;position:absolute;top:0;left:0;width:1em;text-align:center;}

#require-box1{}

/* PCレイアウト時 */
body.l{}
.l #page{background:url("../img/page-bg.jpg") repeat-y top center;background-size:100% auto;}
.l .ct-wrap{width:100%;}

.l .sp-only{display:none;}

/* コンテンツセクション */
.l .section{width:980px;}

/* コラボレーション */
.l .collaboration{}

/* キービジュアル */
.l .kv{width:100%;max-width:980px;margin:0 auto;}
.l .kv:after{padding-bottom:7.654%;}
.l .kv h2{width:76.531%;}

/* クエスチョン */
.l #question:after{padding-bottom:10%;}
.l #question p{width:71.429%;margin:0 auto;}
.l #question p:after{padding-top:46%;}
.l #question p img{width:101.286%;left:0;margin-top:0;}

/* アンサー */
.l #answer{border:5px solid #e60012;border-radius:40px;margin-bottom:53px;}
.l #answer .head{width:62.887%;margin-bottom:7.103%;}
.l #answer .head img{margin-top:1.64%;}
.l #answer .title{width:45.361%;margin-bottom:3.918%;}
.l #answer .text{width:83.712%;margin-bottom:3.268%;}
.l #answer .text p{font-size:18px;line-height:1.723em;}
.l #answer .img{width:62.887%;}
.l #answer .img:after{padding-top:9.345%;}

/* 知ってる？たんぱく質のこと */
.l #protein{border-radius:40px;margin-bottom:54px;}
.l #protein .title{margin-bottom:5.103%;}
.l #protein .title img{width:72.449%;}
.l #protein .text{width:82.858%;margin-bottom:3.572%;}
.l #protein .text p{font-size:18px;line-height:1.723em;}
.l #protein .img{width:62.245%;}
.l #protein .img:after{padding-top:11.968%;}

/* 現代人はたんぱく質不足！！ */
.l #lack{border-radius:40px;margin-bottom:180px;}
.l #lack .title{margin-bottom:5.307%;}
.l #lack .title img{width:72.449%;}
.l #lack .text{width:82.858%;margin-bottom:4.082%;}
.l #lack .text p{font-size:18px;line-height:1.723em;}
.l #lack .img{width:62.245%;}
.l #lack .img:after{padding-top:9.017%;}

/* そんな現代人のたんぱく質不足を補う商品が・・・ */
.l #compensate{border:8px solid #00a0e9;border-radius:30px;margin-bottom:11.334%;}
.l #compensate .title{width:67.532%;margin-bottom:3.32%;}
.l #compensate-item{width:63.279%;margin-bottom:2.075%;}
.l #compensate .text p{font-size:26px;}
.l #compensate .img{width:90.872%;}
.l #compensate .img:after{padding-top:5.708%;}

/* キャンペーン概要 */
.l #outline{width:100%;max-width:980px;margin-bottom:30px;}
.l #outline:before{padding-top:35px;}
.l #outline .title{width:38.164%;margin-bottom:4.082%;}
.l #outline .img{width:72.041%;margin-bottom:4.592%;}
.l #outline .text{width:76.531%;}
.l #outline .text p{font-size:30px;line-height:1.6em;}
.l #outline .text ul{margin-top:0.511%;}
.l #outline .text ul li{font-size:20px;line-height:2.25em;}

/* そして、どれだけおトクになるかは・・・ */
.l #gain-title{width:100%;max-width:980px;margin-bottom:40px;}
.l #gain-title img{width:58.776%;}
.l #gain{border:8px solid #00a0e9;border-radius:30px;margin-bottom:70px;}
.l #gain:before{padding-top:5.706%;}
.l #gain .img{width:66.805%;margin-bottom:3.113%;}
.l #gain .text{width:64.938%;margin-bottom:9.855%;}
.l #gain .text:after{padding-top:7.828%;margin-bottom:-11.183%;}
.l #gain .text ul{margin-bottom:7.988%;}
.l #gain .text ul li{font-size:20px;}
.l #gain .text p{font-size:26px;}
.l #gain-exsample{width:58.507%;margin-bottom:6.743%;}
.l #gain-result{width:65.353%;}
.l #gain-result:after{padding-top:11.905%;}

/* 対象商品 */
.l #target{width:100%;max-width:980px;}
.l #target .title{width:22.041%;margin-bottom:5.103%;}
.l #target .img{width:67.347%;}
.l #target .img:after{padding-top:15.152%;}

/* 注意事項 */
.l #require:before{padding-top:95px;}
.l #require:after{padding-top:80px;}

.l .require-box{margin-bottom:2.809%;}

.l .require{width:98.98%;max-width:970px;border:3px solid #FFF;padding:0 37px;}
.l .require h3{font-size:28px;margin-bottom:5.956%;padding:0 2.25em;}
.l .require h3:before,
.l .require h3:after{width:1.7143em;padding-top:1.5em;margin-top:-0.12em;}
.l .require h4{font-size:26px;line-height:1.731em;}
.l .require p{font-size:20px;line-height:2em;}
.l .require ul{}
.l .require ul li{font-size:20px;line-height:2em;}
.l .require ul li span{}

.l #require-box1 h4{font-size:24px;line-height:1.668em;}
.l #require-box1 p{font-size:24px;line-height:1.8em;}
.l #require-box1 li{font-size:24px;line-height:1.8em;}

.l #footer{margin-top:0;}

/* SPレイアウト時 */
.s #page{background:url("../img/sp/page-bg.jpg") repeat-y top center;background-size:100% auto;}
.s .ct-wrap{width:100%;}

.s .pc-only{display:none;}
.s .sp-only{display:block;}

.s #page{padding-bottom:0;}

/* コラボレーション */
.s .collaboration{}

/* キービジュアル */
.s .kv:after{padding-bottom:6%;}

/* クエスチョン */
.s #question{width:93.334%;}
.s #question:after{padding-bottom:11.429%;}
.s #question p:after{padding-top:46%;}
.s #question p img{width:101.286%;left:0;margin-top:0;}

/* アンサー */
.s #answer{width:94.668%;border:3px solid #e60012;border-radius:20px;margin-bottom:6.668%;}
.s #answer .head{width:86.648%;margin-bottom:7.103%;}
.s #answer .title{width:62.5%;margin-bottom:7.813%;}
.s #answer .text{width:86.648%;margin-bottom:3.268%;}
.s #answer .text p{color:#000;text-align:left;font-size:2.94vw;line-height:1.819em;}
.s #answer .img{width:86.648%;}
.s #answer .img:after{padding-top:8.197%;}

/* 知ってる？たんぱく質のこと */
.s #protein{width:94.668%;border-radius:20px;overflow:hidden;margin:0 auto 6.668%;}
.s #protein .title{background-color:#00a0e9;margin-bottom:7.103%;}
.s #protein .img{width:85.916%;}
.s #protein .img:after{padding-top:10.656%;}
.s #protein .text{width:85.916%;margin-bottom:4.972%;}
.s #protein .text p{font-size:2.94vw;line-height:1.819em;}

/* 現代人はたんぱく質不足！！ */
.s #lack{width:94.668%;border-radius:20px;margin-bottom:22.668%;}
.s #lack .title{background-color:#00a0e9;margin-bottom:7.043%;}
.s #lack .text{width:85.916%;margin:0 auto 5.634%;}
.s #lack .text p{color:#000;text-align:left;font-size:2.94vw;line-height:1.819em;}
.s #lack .img{width:85.916%;margin:0 auto;}
.s #lack .img:after{content:'';display:block;position:relative;z-index:1;padding-top:10.656%;}

/* そんな現代人のたんぱく質不足を補う商品が・・・ */
.s #compensate{border:3px solid #00a0e9;border-radius:15px;margin-bottom:11.334%;}
.s #compensate .title{width:92.472%;margin-bottom:4.262%;}

.s #compensate-item{width:86.648%;margin-bottom:2.841%;}
.s #compensate .text{width:85.916%;margin:0 auto 9.233%;}
.s #compensate .text p{font-size:3.47vw;line-height:1.731em;}
.s #compensate .img{width:79.546%;margin:0 auto;}
.s #compensate .img:after{content:'';display:block;position:relative;z-index:1;padding-top:8.036%;}

/* キャンペーン概要 */
.s #outline{width:94.134%;margin-bottom:9.334%;}
.s #outline:before{padding-top:11.334%;}
.s #outline .title{width:52.975%;margin:0 auto 5.666%;}
.s #outline .img{width:100%;margin-bottom:6.374%;}
.s #outline .text{width:100%;margin-bottom:1.7%;}
.s #outline .text p{font-size:4vw;}
.s #outline .text ul{margin-top:1.7%;}
.s #outline .text ul li{font-size:2.667vw;line-height:2.25em;}

/* そして、どれだけおトクになるかは・・・ */
.s #gain-title{width:76.8%;margin:0 auto 5.334%;}
.s #gain{width:94.668%;border:3px solid #00a0e9;border-radius:15px;margin-bottom:7.334%;}
.s #gain:before{padding-top:8.523%;}
.s #gain .img{width:89.685%;margin-bottom:4.262%;}
.s #gain .text{width:88.921%;margin-bottom:13.495%;}
.s #gain .text:after{padding-top:7.828%;margin-bottom:-11.183%;}
.s #gain .text ul{margin-bottom:4.793%;}
.s #gain .text ul li{font-size:2.667vw;}
.s #gain .text p{font-size:3.467vw;}
.s #gain-exsample{width:80.114%;margin-bottom:4.672%;}
.s #gain-result{width:89.489%;}
.s #gain-result:after{padding-top:7.143%;}

/* 対象商品 */
.s #target{width:88%;}
.s #target .title{width:32.728%;margin-bottom:7.576%;}
.s #target .img:after{padding-top:9.849%;}

/* 注意事項 */
.s #require{background-color:#00a0e9;}
.s #require:before{padding-top:5.334%;}
.s #require:after{padding-top:4.668%;}

.s .require-box{margin-bottom:3.732%;}

.s .require{width:94.668%;border:2px solid #FFF;padding:0 2.4%;}
.s .require:before{content:'';display:block;padding-top:5.972%;}
.s .require:after{content:'';display:block;padding-top:3.733%;}
.s .require h3{font-size:3.734vw;margin-bottom:4.18%;padding:0 2.3em;}
.s .require h3:before,
.s .require h3:after{width:1.714em;padding-top:1.5em;margin-top:-0.12em;}
.s .require h4{font-size:3.467vw;line-height:1.616em;}
.s .require p{font-size:3.2vw;line-height:1.75em;}
.s .require ul{}
.s .require ul li{font-size:3.2vw;line-height:1.75em;}
.s .require ul li span{}

.s #require-box1 h4{font-size:3.467vw;line-height:1.616em;}
.s #require-box1 p{font-size:3.2vw;line-height:1.75em;}
.s #require-box1 li{font-size:3.2vw;line-height:1.75em;}

.s #footer{margin-top:0;}