/* PR文言 */
.pr_box{font-weight: 400;font-size: 0.7em;background-color: #f0f0f0;padding: 1em;margin-bottom: 2em;}

/* 記事タイトル */
main #center .title_area h1{margin-bottom:20px;font-size:30px;line-height:1.5;font-weight:700;font-family:"Yu Mincho","游明朝体","YuMincho","Noto Serif JP","serif";text-align:left;margin-top:0}

/* 投稿日 */
#center .detail .date{display:inline-block;margin-right:20px;text-align:left;font-size:13px;font-weight:400}

/* 執筆者 */
.writer{text-align:right;font-size:13px;margin-bottom:10px;font-weight:400}

/* リード文 */
main .title_area .lead{text-align:left;margin-top:10px;font-weight:400}

/* おすすめ */
.suggest{background-color:#F8E3E5;margin-top:20px;padding:10px 10px 20px 0}
.suggest p{color:#E16B79;font-weight:700;text-align:center;}
.suggest ul{position:relative;list-style-type:none}
.suggest li{position:relative;text-align:left;padding-left: 40px;font-weight:400;font-size:14px;line-height:1.8}
.suggest li::after{content:'';display:block;position:absolute;top:.5em;left:1.2em;width:10px;height:5px;border-left:2px solid #E16B79;border-bottom:2px solid #E16B79;transform:rotate(-45deg)}


/* ストライプ下 */
.stripe{position:relative}
.stripe:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:12px;background:repeating-linear-gradient(-45deg,#CEEFF5,#CEEFF5 5px,white 5px,white 10px)}

/* ストライプ上 */
.stripe_top{position:relative}
.stripe_top:after{content:'';position:absolute;left:0;top:0;width:100%;height:12px;background:repeating-linear-gradient(-45deg,#CEEFF5,#CEEFF5 5px,white 5px,white 10px)}



/* 目次 .accordion_2.stripe_top  #toggle1 */
#center .accordion_2{margin:3em auto}
#center .accordion_2:hover{transition:opacity .5s ease-out}
#center .accordion_2 .toggle{display:none}
#center .accordion_2 .option{position:relative;margin-bottom:1em}
#center .accordion_2 .title,#center .accordion_2 .content{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all .3s}
#center .accordion_2 .title{display:block;color:#53BBCC;font-weight:700;background:#CEEFF5;text-align:center;padding:20px 0 15px;font-size:18px;margin: 0px;}
#center .accordion_2 .title::after,#center .accordion_2 .title::before{content:"";position:absolute;right:1.25em;top:40%;width:2px;height:.75em;background-color:#999;transition:all .3s}
#center .accordion_2 .title::after{transform:rotate(90deg)}
#center .accordion_2 .content{max-height:0;overflow:hidden}
#center .accordion_2 .content ol{margin:0;font-size:.9em;line-height:1.5}
#center .accordion_2 .toggle:checked + .title + .content{max-height:1500px;transition:all 1.5s}
#center .accordion_2 .toggle:checked + .title::before{transform:rotate(90deg)!important}

/* プルダウン */
#center .area .accordion_2{width:100%}
#center .area .accordion_2 li{border-bottom:none;padding:5px}
ol.number,ol.number ul{counter-reset:list;list-style:none;padding:0}
ol.number ul{margin:0 0 0 35px;list-style-type:none}
.number a{position:relative;display:block;text-decoration:none;margin:8px 0 8px 30px;font-weight: normal;}
.number a:hover{background:#EEFCFF}
.number .big_number:before{content:counter(list);counter-increment:list;position:absolute;left:-30px;top:65%;height:20px;width:20px;margin-top:-1em;background:#53BBCC;line-height:18px;text-align:center;font-weight:700;color:#fff}
.number a:after{content:'';position:absolute;left:-28px;top:65%;margin-top:-6px;border:6px solid transparent}
#center .area .pref ul{border:none;border-bottom:none}
.number .big_number{padding:10px;font-weight: normal;}
#center .details_takuten dl{margin:5px 0}

/* ----------------- 
       本文
--------------------- */
.content_wrap a,.title_area a{background: linear-gradient(transparent 95%, #ccc 0%);}

/*-----
みだし
----- */
.section_title{font-size:25px;font-weight:700;margin-top:60px;padding:5px 5px 5px 30px;position:relative}
.section_title:before{background-color:#ef858c;border-radius:5px;content:'';position:absolute;top:0;left:3px;width:8px;height:95%}
.section_title:after{background-color:#f3cbd0;border-radius:5px;content:'';position:absolute;top:0;left:15px;width:8px;height:95%}

/* ひし形リスト */
.area_piece{width:370px;list-style:none;position:relative;padding:.5em 1em .5em 2.3em;margin-bottom:5px;font-size:16px;font-weight:700;border-bottom:1px solid #CEEFF5}
.area_piece:after,.area_piece:before{content:"";position:absolute;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.area_piece:before{top:.7em;left:.2em;width:12px;height:12px;border:2px solid #CEEFF5}
.area_piece:after{top:.9em;left:.7em;width:14px;height:14px;background:#CEEFF5;-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}


/*-----
テキスト、テキストリンク
----- */
p.text_box,.quote,.table_border,.details_takuten {font-weight: normal;}
p.text_box {margin-top: 25px;}
p.lead{font-weight:400;text-align:left;margin-top:10px}

/* .reference_box{margin-top:20px}
.reference{font-size:12px;margin-top:5px;font-weight:400}
.reference_box a{text-decoration:underline #EFEFEF 2px}
.graph_quote{font-size:10px;text-align:right;margin-top:5px;margin-bottom:20px;font-weight:400} */

/* 引用 */
.quote{font-size:10px;text-align:right;margin: 30px 0 0;}
.small{font-size:13px}
.graph_quote{font-size:10px;text-align:right;margin-top:5px;margin-bottom:20px}


/* ボタンレイアウトのリンク */
.linkber {padding: 5px 5px 10px;margin-top: 15px;text-align: center;background-color: #EEBABE;box-shadow: inset 0 -4px 0 rgb(0 0 0 / 5%);color: #fff;font-weight: bold;font-size: .8em;}
.linkber_gray {padding: 5px 5px 10px;margin-top: 15px;text-align: center;background-color: #ccc;box-shadow: inset 0 -4px 0 rgb(0 0 0 / 5%);color: #fff;font-weight: bold;font-size: .8em;}
.linkber a{color:#fff;display:inline-block;width:100%}

/* 表レイアウト */
.table_title{margin-top:15px;margin-left:5px;font-size:14px}
.area_konintodoke dl{margin:5px;border-bottom:2px solid #CEEFF5;border-top:2px solid #CEEFF5}
.area_konintodoke dl dt{float:left;font-size:14px;clear:left;width:200px;padding:5px}
.area_konintodoke dt::after{content:"："}
.area_konintodoke dd{font-size:14px;margin-left:0;padding:5px}
.tokuten dd{padding-top:31px}
.area_konintodoke .table_border:nth-of-type(odd){background:#FAFAFA}

/*-----
画像
----- */
.content_wrap img{margin-top:10px}
/* .area_konintodoke h2{font-size:16px;margin:30px 0 20px} */
#center .area .white_box{padding:20px 30px 40px}
.content_wrap .slider_list .slider_img{width:400px;}


/* 特典詳細アコーディオン */
.area_konintodoke .details_takuten dl{margin:5px 45px}
.area_konintodoke .details_takuten dt{background-color:#FAFAFA;width:100%;}
.area_konintodoke .details_takuten dd{display: inline-block;}
.area_konintodoke .details_takuten dt::after{content:none}
.genre_konintodoke h2{font-size:23px;margin:30px 0 20px}
.point_konintodoke h3{font-size:23px;margin:30px 0 20px}
#center .accordion_2 .details_takuten .title {padding: 5px 5px 5px 10px;color: #53BBCC;font-size: 14px;font-weight: 700;background: #CEEFF5;position: relative;text-align: left;cursor: pointer;margin: 0px;}
#center .white_box .accordion_2 {margin: 0px;}

/* よくある質問 */
.summary{border:#FFF2A9 solid 15px;margin-top:50px}
.question{background-color:#FFF2A9;height:50px;text-align:center;font-weight:700;line-height:35px;font-size:23px}
.summary dl dt{background-color:#CEEFF5;font-weight:700;padding:0.5em 1em 0.5em 2em;line-height:1.5;margin:15px 10px;font-size:15px}
.summary dl dt p{padding:5px}
.summary dl dd{margin:10px 10px 20px 45px;font-size:15px;font-weight: normal;}
.summary dt::before{font-size:1.5em;color:#53BBCC;float:left;margin:-0.1em .4em 0 -1em;content:'Q'}
.summary dd::before{margin:0 .5em 0 -1.6em;padding:10px 0 0 10px;content:'A';border-radius:.2em;font-size:1.5em;color:#E16A78;font-weight:700}
.stripe_summary{position:relative}
.stripe_summary:after{content:'';position:absolute;left:0;top:0;width:107%;height:12px;margin-top:-25px;margin-left:-15px;background:repeating-linear-gradient(-45deg,#FFF2A9,#FFF2A9 5px,white 5px,white 10px)}
.summary dl dd ul{list-style-type: disc;padding-left: 20px;font-size: 13px;}
.small_min{font-size: 10px;}

/* マーカー */
.markerYellow{background:linear-gradient(transparent 50%, #fdffa6 0%);}
.markerBlue{background:linear-gradient(transparent 50%, #d4eaff 0%);}
.markerRightBlue{background:linear-gradient(transparent 50%, #cffafa 0%);}
.markerRed{background: linear-gradient(transparent 70%, #ffc2c2 0%);font-weight: 700;font-size: 95%;}
.markerpink {background: linear-gradient(transparent 50%, #FFDBED 0%);}

/* 関連記事 */
.connection {margin: 20px auto 50px;width: 90%;border: #795548 solid 3px;}
.connection .small {text-align: center;background-color: #795548;color: #fff;}
.connection_title {font-size: 13px;margin-left: 80px;padding: 20.5px 10px;background: #fff;}
.connection img {margin: 0;float: left;width: 80px;}

/* この記事を読んだ人におすすめ */
.recommend_box{background: #fff;box-shadow: 1px 1px 8px -5px #53BBCC;margin-top: 3em;}
.recommend_box p {text-align: center;padding-top: 1.5em;font-size: 1.2em;}
.recommend_box ul {padding:1.5em;font-size: 0.9em;}
.recommend_box ul li {padding: 1em 0em 1em;box-shadow: 0 2px 3px rgb(83 187 204 / 20%);margin-top: 0.5em;overflow: hidden;position: relative;z-index: 1;}
.recommend_box ul li img {width: 25%;float: left;padding-left: 0.5em;margin: 0;}
.recommend_box ul li span {padding: 1.7em 1em;display: flex;}
.recommend_box ul li::after {background: #CEEFF5;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1);transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;}
.recommend_box ul li:hover::after {transform: scale(1, 1);}
  
/* ＼他の人はこんな記事も読んでいます／ */
.hokanohito_box{background: #fff;box-shadow: 1px 1px 8px -5px #000;margin: 3em 0;}
.hokanohito_box p {padding: 1em 0 0 1em;font-size: 0.8em;}
.hokanohito_box ul {padding:0em .5em .5em .5em;font-size: 0.9em;}
.hokanohito_box ul li {margin-top: 0.5em;padding: .5em;overflow: hidden;position: relative;z-index: 1;}
.hokanohito_box img {width: 25%;float: left;box-shadow: 0 2px 3px rgb(0 0 0/ 20%);margin: 0;}
.hokanohito_box span {padding: 1.7em 1em;display: flex;}
.hokanohito_box ul li::after {background: #fcf0b1;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1);transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;}
.hokanohito_box ul li:hover::after {transform: scale(1, 1);}
.hokanohito_box .markergray {background: linear-gradient(transparent 0%, #e3e1e1 100%);padding: 0;display: inline;}





@media only screen and (max-width: 1279px) {
.stripe_summary:after{width:105.5%}
.content_wrap .slider_list .slider_img{width:300px;}
#center .floating {margin: 3em auto;position: sticky;top:0px;z-index:30;background-color: #f4ffff;opacity: 0.98;}
.number .big_number:before {left: -20px;top: 58%;}
#center .floating .content{position: absolute;background-color: #f4ffff;opacity: 0.99;width: 100%;overflow: scroll;font-size: 13px;height: 85vh;}

}


@media screen and (max-width: 767px) {
  main #center .title_area h1{font-size:25px}
  main .title_area p.writer{line-height:1.2}
  main .title_area .content_title{font-size:25px}
  main .title_area p {line-height: 1.5;}
  .section_title{font-size:23px}
  .genre_konintodoke h2,.point_konintodoke h3{font-size:20px}
  .suggest li{font-size:14px}
  .content_wrap .slider{width:100%;max-width:300px;min-width:250px;margin:auto}
  .content_wrap .slider_list .slider_img{width:100%;height:100%;max-width:300px;}
  .area_piece{width:100%}
  .stripe_summary:after{width:108.5%}
  #center .floating {top:60px;}
  #center .floating .content{height:300px;}
  .recommend_box ul li span {padding: 1em;font-size: 0.8em;}
  .hokanohito_box span {padding: 1em;font-size: 0.9em;}
  
}