.aboutpage{width:100%;margin:0 auto;font-family:"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;position:relative;}

.aboutpage h3{text-align:center;margin:20px auto;font-size:30px;font-weight:600;}
@media only screen and (max-width:768px){
  .aboutpage h3{font-size:22px;padding:0 5px;}
	.aboutpage h3 img{display:block;margin:0 auto 10px;max-width:95%;}
}
.aboutpage .stripeborder{width:100%;height:11px;background-repeat:repeat;background-position:center;background-image:url(../img/about2024/line.png);}

.aboutpage #visual{padding:0;background-size:auto 100%;background-repeat:repeat;background-position:center;background-image:url(../img/about2024/title_back.jpg);text-align:center;}

.aboutpage #menu{margin-top:20px;position: sticky;top:60px;z-index:100;background-color:#fff;padding:5px 0 10px;}
.aboutpage #menu ul{max-width:850px;margin:0 auto;}
.aboutpage #menu ul li{display:inline-block;width:33%;text-align:center;}
.aboutpage #menu ul li img{cursor:pointer;}
.aboutpage #menu .pre img{width:0;height:0;}

.aboutpage #lead{padding:0;}
.aboutpage #lead div{margin-top:20px;}
.aboutpage #lead div h3{font-size:30px;font-weight:600;margin:30px auto 30px;}
.aboutpage #lead div h3 span{font-size:33px;color:#e03d04;text-decoration:underline;}
.aboutpage #lead div ul{max-width:750px;width:98%;margin:0 auto;}
.aboutpage #lead div ul li{display:inline-block;width:50%;text-align:center;margin-bottom:25px;}
.aboutpage #lead div ul li img{max-width:98%;}
@media only screen and (max-width:768px){
  .aboutpage #menu ul li img{max-width:95%;}
  .aboutpage #lead div h3{font-size:22px;padding:0 5px;}
  .aboutpage #lead div h3 span{font-size:26px;}
}

.aboutpage #monthly_schedule{margin:0 auto 30px;padding:10px 0 30px;background-image:url(../img/about2024/monthly_schedule_back.png);text-align:center;}
.aboutpage #monthly_schedule img{max-width:98%;}

.aboutpage #regular{margin:0 auto 10px;}
.aboutpage #regular .regulars{padding:0;background-image:url(../img/about2024/regular_back.png);}
.aboutpage #regular .regulars .wrap850{max-width:850px;margin:0 auto;position:relative;}
.aboutpage #regular .regulars .wrap850.topborder{border-top:0.5px dotted #ccb506;}
.aboutpage #regular .regulars .wrap850 h4{position:absolute;left:0;top:0;}
.aboutpage #regular .regulars .wrap850.topborder h4{top:-1px;}
.aboutpage #regular .regulars h4 img{max-width:33vw;}
.aboutpage #regular .regulars h4 img.regular_back{padding:5px 0 0 5px;mix-blend-mode:multiply;}
.aboutpage #regular .regulars ul{max-width:780px;width:95%;margin:0 auto;padding-top:20px;z-index:2;position:relative;}
.aboutpage #regular .regulars li{display:inline-block;width:50%;text-align:center;margin-bottom:20px;vertical-align:middle;}
.aboutpage #regular .regulars li p{max-width: 45vw;width:100%;margin:0 auto;text-align:left;}
.aboutpage #regular .regulars li img{max-width:45vw;}
.aboutpage #regular .goto_regular{display:block;margin:10px auto 0;text-align:center;font-size:18px;color:#333;font-weight:600;}
@media only screen and (max-width:768px){
  .aboutpage #regular .regulars li p{font-size:13px;line-height:120%;}
}

.aboutpage #special{margin:0 auto 20px;}
.aboutpage #special .wrap850{max-width:850px;margin:0 auto;}
.aboutpage #special #content_data{display:none;}
.aboutpage #special .thismonth{margin:30px auto 15px;max-width:755px;background-image:url(../img/about2024/thismonth_back.png);}
.aboutpage #special .futuremonth{margin:30px auto 15px;max-width:755px;background-image:url(../img/about2024/future_back.png);}
.aboutpage #special .delivery{display:inline-block;margin-top:-20px;margin-left:-20px;}
.aboutpage #special p.month{display:inline-block;padding:0 10px;margin:10px;font-size:30px;height:55px;line-height:55px;vertical-align:middle;border-top:1px solid #000;border-bottom:1px solid #000;}
.aboutpage #special p.title{display:inline-block;font-size:28px;height:75px;vertical-align:middle;}
.aboutpage #special .futuremonth p.title{margin-left:10px;}
.aboutpage #special .description{display:flex;padding:15px 35px 15px 60px}
.aboutpage #special .description img{width:70%;}
.aboutpage #special .description p.text{padding-left:30px;font-size:18px;}
.aboutpage #special .goto_feature{display:block;margin:30px auto 0;text-align:center;font-size:18px;color:#333;font-weight:600;}
@media only screen and (max-width:768px){
  .aboutpage #special .thismonth{max-width:96%;}
  .aboutpage #special .futuremonth{max-width:96%;}
  .aboutpage #special .delivery{width:50px;margin-top:15px;margin-left:5px;}
  .aboutpage #special p.month{display:none;}
  .aboutpage #special p.title{font-size:18px;height:55px;padding:15px 5px;width: calc(100% - 50px - 10px);}
  .aboutpage #special .futuremonth p.title{margin-left:0;}
  .aboutpage #special .description{display:block;padding:15px 0;}
  .aboutpage #special .description img{max-width:90%;display:block;margin:5px auto 0;}
  .aboutpage #special .description p.text{padding:10px 1em;font-size:16px;}
}

.aboutpage #backnumber{margin:0 auto 20px;}
.aboutpage #backnumber .backnumbers{padding:30px 0;background-image:url(../img/about2024/magazine_back.png);}
.aboutpage #backnumber .backnumbers p{text-align:center;font-size:22px;font-weight:600;padding:0 1em;}
.aboutpage #backnumber .backnumbers ul{max-width:800px;width:95%;margin:20px auto 10px;}
.aboutpage #backnumber .backnumbers ul li{display:inline-block;width:33%;vertical-align:middle;text-align:center;margin-bottom:10px;}
.aboutpage #backnumber .backnumbers ul li img{max-width:94%;}
.aboutpage #regular .regulars li img{max-width:45vw;}
.aboutpage #backnumber .goto_magazine{display:block;margin:30px auto 0;text-align:center;font-size:18px;color:#333;font-weight:600;}
@media only screen and (max-width:768px){
  .aboutpage #backnumber .backnumbers p{font-size:18px;}
}

.aboutpage #plan{margin:0 auto 30px;}
.aboutpage #plan .plans{padding:30px 0;background-color:#f5f5f5;}
.aboutpage #plan .plans .wrap850{max-width:850px;margin:0 auto;}
.aboutpage #plan .plans .plan{display:inline-block;vertical-align:top;max-width:425px;width:48%;min-height:210px;margin:0 0.9% 80px;padding:25px 0 30px;background-color:#fff;text-align:center;position:relative;z-index:1;border-radius:4px;}
.aboutpage #plan .plans .plan h4{font-size:30px;font-weight:600;}
.aboutpage #plan .plans .plan hr{margin:10px auto;height:0;border-top:1px solid #333;width:97%;}
.aboutpage #plan .plans .plan p{font-size:19px;}
.aboutpage #plan .plans .plan p .price_ps{display:block;font-size:13px;color:#f00;}
.aboutpage #plan .plans .plan p .price{font-size:40px;font-weight:600;}
.aboutpage #plan .plans .plan p.year .price{color:#333; /*ccb506;*/ }
.aboutpage #plan .plans .plan p.year .otoku{font-size:16px;color:#fff;background-color:#ccb506;padding:2px 0.6em 0px 0.4em;letter-spacing:-0.5px;white-space:nowrap;border-radius:3px;}
.aboutpage #plan .plans .plan p small{font-size:13px;color:#f00;}
.aboutpage #plan .plans .plan span.plan_year{position:absolute;right:6px;top:90px;font-size:16px;color:#fff;background-color:#cbb406;padding:15px 0.5em 10px;letter-spacing:-0.1em;border-radius:40px;width:80px;}
.aboutpage #plan .plans p.entry{position:absolute;width:100%;left:0;bottom:-40px;}
.aboutpage #plan .plans p.entry a{display:block;width:80%;border:1px solid #000;border-radius:30px;font-size:32px;padding:10px 0;text-align:center;background-color:#fff;margin:0 auto;position:relative;z-index:2;}
.aboutpage #plan .plans p.entry a:hover{color:#fff;background-color:#000;}
.aboutpage #plan .plans p.caution{max-width:800px;width:90%;font-size:16px;margin:0 auto;}
.aboutpage #plan .plans p.caution strong{font-weight:600;}
.aboutpage #plan .plans p.caution a{text-decoration:underline;}
@media only screen and (max-width:559px){
	.aboutpage #plan .plans{padding:15px 0;}
  .aboutpage #plan .plans .plan{width:98%;padding:25px 3% 50px;min-height:0;}
	.aboutpage #plan .plans .plan h4{font-size:22px;}
  .aboutpage #plan .plans .plan hr{margin:10px auto;}
  .aboutpage #plan .plans .plan span.plan_year{width:65px;right:5px;top:85px;font-size:14px;}
  .aboutpage #plan .plans p.entry a{width:92%;border:1px solid #000;border-radius:30px;font-size:32px;padding:10px 0;text-align:center;background-color:#fff;}
}

.aboutpage #banner{max-width:850px;margin:0 auto 30px;padding:0 10px;}

.aboutpage #qa{width:100%;background:#f5f5f5;padding:20px 0 50px;margin:50px auto 50px;}
.aboutpage #qa a{text-decoration:underline;}
.aboutpage #qa h3{text-align:center;margin:0 0 30px;}
.aboutpage #qa h3 span{font-size:30px;font-weight:600;color:#000;border-bottom:solid 2px #000;}
.aboutpage #qa .wrap850{max-width:850px;margin:0 auto;}
.aboutpage #qa #qa_list{width:90%;margin:0 auto;}
.aboutpage #qa #qa_list dt{font-size:22px;font-weight:600;color:#cc3806;height:52px;padding-left:60px;}
.aboutpage #qa #qa_list dt::before{content:url(../img/about2024/q.png);display:inline-block;width:52px;height:52px;margin-left:-65px;padding-right:0.5em;vertical-align:middle;}
.aboutpage #qa #qa_list dd{font-size:18px;background:#fff;border-radius:10px;padding:15px 20px;border-radius:10px;margin:0 0 20px 50px;line-height:180%;padding-left:2em;}
.aboutpage #qa #qa_list dd::before{content:"A.";font-weight:600;margin-left:-1.5em;padding-right:0.3em;}

@media only screen and (max-width:768px){
  .aboutpage #qa h3 span{font-size:22px;}
  .aboutpage #qa #qa_list{width:95%;margin:0 auto;}
  .aboutpage #qa #qa_list dt{font-size:18px;height:auto;padding-left:33px;margin-bottom:8px;}
  .aboutpage #qa #qa_list dt::before{content:"";background-size:contain;background-repeat:no-repeat;background-image:url(../img/about2024/q.png);width:33px;height:27px;margin-left:-33px;padding-right:0;}
  .aboutpage #qa #qa_list dd{margin:0 0 20px 0;}
}


#popup_background{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(64,64,64,0.6);width:100vw;height:100%;}
#popup{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);height:80vh;width:calc(80vh * 0.6415);max-width:100%;position:relative;display:none;}
#popup #close{display:block;position:absolute;width:30px;height:30px;top:3px;right:3px;}
#popup #close::before,
#popup #close::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:30px;background:#000;}
#popup #close::before{transform:translate(-50%,-50%) rotate(45deg);}
#popup #close::after{transform:translate(-50%,-50%) rotate(-45deg);}
#popup #popup_link{position:absolute;bottom:5px;right:5px;}
#popup #popup_link img{height:calc(80vh * 0.19849);}