@charset "utf-8";
/*reset*/
html{font-size: 62.5%; }
html nav#nav,html #search-box{font-size:16px;z-index: 99;position: relative;}
html #search-box{background: #fff;}
header{background: #fff;z-index: 99;position: relative;}
header #pc-section ul.small-navi li{font-size:16px;}
#main-contents { width:100%; margin:0 !important; padding:0 !important;font-size: 1.8rem !important; }
#editor .wapper-special {  width:100%; max-width:none !important; border:none!important}
#contents { margin:0 !important; padding:0!important}
#su header { margin:0}
.special-sns{ display:none!important}
#editor .wrapper{ padding:90px 0 0}
#main-contents .wapper-special h2{margin:0 auto}
@media screen and (min-width: 768px){
#editor .wrapper{ padding:120px 0 0}
header{margin: 0;padding:15px;}
}

@media only screen and (min-width: 1024px){
header{padding:0px;}
}
#search-box{display: none;}
/********************* 特設サイト共通 *********************/
#editor .wapper-special{ width:100%; max-width:980px; margin: 0 auto; padding:0;line-height:1.8em;font-size: 1.6rem; font-size:105%; position:relative; background: #fffde5}
#su .small{font-size: 90%;line-height: 1.8em;}
#su .pb{padding:30px 0}
#main-contents p { line-height:180%;  }
footer{position: relative}

/*全体*/
#su { line-height:1.4em;font-size: 1.6rem; border:none; font-weight: 500; font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; letter-spacing: .05em;text-align: left;color:#000; box-sizing: border-box;}
#su::before{content: ""; background: url("../img/bg.png?rd=2025") -20px 50px repeat ;background-size:68%;height:100vh;width:100%;position: fixed;top:0}
@media screen and (min-width: 768px){
#su::before {background-size:40%;}
}
#su .container{ padding:2em 1.0em ;max-width:980px; margin:0 auto; }




/*リンク設定*/
#su a{color:#000;border-bottom:2px dotted #9d213d;}
#su a:hover{ border-bottom:2px dotted #f4fade;text-decoration:none; opacity:0.75}
#su nav a{color:#9d213d;border-bottom: none;}
#su nav a:hover{border-bottom: none; opacity:0.7}
#su .copy a{color:#FFF;border-bottom:2px dotted #FFF;}
#su .copy a:hover{ border-bottom:2px dotted #FFF;text-decoration:none; opacity:0.75}
#su #about a,
#su #book a{border-bottom: none;}
#su #t_o_c p a{color:#9d213d;}
/********************* loading *********************/
#loader { display: none; position: fixed; top: 50%; left: 50%; z-index: 100;
	_position: absolute; /* IE6対策 */
	/* margin-top: -112px; heightの半分のマイナス値 */
	margin-left: -150px; /* widthの半分のマイナス値 */
    z-index: 100;
}
#loader p { width:auto; height:16%; max-width:300px; text-align:center; margin:0 auto;}
#fade {	width: 100%; height: 100%; display: none;background:#a67eb7; position: absolute; top: 0px; left: 0px; z-index: 50;}


/*section*/
#su section{width:100%;margin:0 auto 40px;padding:10% 0;}

@media screen and (min-width: 768px){
#su section{width:100%;margin:0 auto 80px;padding:80px 0;}
}



/********************* header *********************/
#su .header_card{position: relative;background:#fff;padding: 44px 0;text-align: center;width:80%;max-width:780px;margin: 0 auto 40px; }
#su .header_card h1{ color:#504934;font-size:6rem; line-height: 1.2em;text-align:center;position: relative; margin-bottom: 30px;animation-duration: 1s;animation-delay:1.8s;  }
#su .header_card h3{color: #504934;font-size: 3.8rem; text-align: center;}
#su .header_card h1 .br{display: block}
/*#su .header_card h1::after{white-space: pre;content: "ひとまず\A上出来";font-size:6rem; color: fff; -webkit-text-stroke:0; text-stroke: 0;line-height: 1.2em;text-align:center;position: absolute;left: 0; right: 0;margin: 0 auto;top: 0;}*/
#su .header_card p{position: absolute; right:0px ;left:0;margin: 0 auto;top:-80px;-ms-writing-mode: tb-rl;writing-mode: vertical-rl; background: #ea5504;height:100px;width:100px;border-radius: 100px; border:8px solid #fff;color: #fff;font-size:2rem;font-weight: 700;display: flex;justify-content: center;align-items: center;line-height: 1.2em;}
#su .header_card p span{display: block;letter-spacing:0}

#su .copy{ background: #504934;width: 100%;padding: 40px 0;text-align: center;margin: 0 auto;position:relative}
#su .copy h2{font-size:4rem;line-height: 1.2em;}
#su .copy h2,
#su .copy p{ width: 90%; margin: 0 auto 28px;max-width: 780px;color: #fff;}
#su .copy p.just{font-size: 2.5rem;line-height: 1.4em;font-weight: bold;text-align: center;letter-spacing:0}

#su .copy img{width: 30%;max-width: 150px}

@media screen and (min-width: 768px){
#su .header {background-size:40%;}
#su .header_card {margin: 0 auto 110px;padding: 50px 0;}
#su .header_card h1{ font-size:7.2rem; line-height: 1.2em;margin-bottom: 46px}
/*#su .header_card h1::after{white-space: pre;content: "ひとまず上出来";font-size:7.2rem; }*/
#su .header_card h3{font-size: 4.8rem;}
#su .header_card p{right:-70px;left:auto; top:-100px; background: #ea5504;height:160px;width:160px;border-radius: 100px; border:14px solid #fff;font-size:3rem;}
#su .header_card h1 .br{display:inline-block}
#su .copy h2 br,
#su .copy p.just br{display: none;font-size: 0;}
#su .copy h2{font-size: 5.2rem;}
#su .copy p.just{font-size: 3.6rem}
#su .copy h2,
#su .copy p{ margin-bottom:  36px;}

}

#su nav.header_nav { background:#fffde5;color:#504934;width:100%;margin-bottom:100px;position:relative}
#su nav ul{ margin:0 auto;display:flex; justify-content: center;flex-wrap: wrap;  align-items: center;max-width: 980px;}
#su nav ul li { font-size:2rem; text-align:center; letter-spacing:0;width:33%;}
#su nav ul li:first-child,
#su nav ul li:nth-child(2),
#su nav ul li:nth-child(3){ border-bottom: 1px solid #504934}
#su nav ul li a{height:50px;display:flex; justify-content: center;flex-wrap: wrap;  align-items: center; border-bottom: none; padding:0; font-weight:600; color:#504934}
#su nav ul li a:hover{background:rgba(255, 255, 255, .3); }


@media screen and (min-width: 768px){
#su nav ul li{width:20%;font-size:2.8rem;}
#su nav ul li a{height:80px;}
#su nav ul li:first-child,
#su nav ul li:nth-child(2),
#su nav ul li:nth-child(3){ border-bottom: none;}
}

#su figure{}
#su figcaption {color: #fff;font-size: 1.4rem;margin-top: 36px}


/*ボタン系*/

#su a.button,
#t_r a.btn{background:#9d213d;border-radius:20px;display: block;width: 80%;max-width: 300px;margin: 0 auto 45px;text-align: center;font-weight: bold;color:#FFF;border-bottom:none;font-size:1.8rem;line-height:1.8em;}
#su a.button{width:100%;line-height: 2.8em;border-radius:10px;font-size:2.2rem;height:60px; margin: 0 auto}
#su a.button,
#t_r a.btn:hover{border-bottom:none}


/*news*/
#su #news,
#su #about{background: #fff;margin-top: 80px auto 0; padding:40px 5%;width: 80%; max-width:980px ; position:relative}
#about h2,
#news h2{background: #fffde5;width: 200px; position:absolute;text-align: center;height: 70px;display: flex;justify-content: center;align-items: center;font-size: 3rem; color:#504934;top:-40px;left:0;right:0;}
#main-contents .wapper-special #news h2{margin: 0 auto}

#about dl,
#news dl{margin: 50px auto 0;width:90%;max-width: 780px}
#news dt{font-weight:bold; color:#504934;}
#news dd{margin-bottom:1.4em;}
@media screen and (min-width: 768px){
#su #news,
#su #about { padding:40px 0;}

#about h2,
#news h2{width: 380px; height: 90px;font-size: 4rem; color:#504934;top:-40px;left:0;right:0;}
#news dl{display:flex;flex-wrap:wrap;max-width:780px}
#news dt{width:150px}
#news dd{width:calc(100% - 150px);}
	}
    
    
/*#about 書籍紹介*/

#su #about{background: #ededed;}
#about dt{text-align: center; margin-bottom: 40px}
#about dt img{width: 100%; max-width: 340px; margin: 0 auto;border:1px solid #ccc}
#main-contents .wapper-special #about p,
#about h3,
#about h3 span{width:100%; margin-bottom: 30px;}
#about h3{font-size:3.6rem;line-height: 1.2em}
#about h3 span{font-size: 3rem;display: block; margin-bottom: 30px;}



@media screen and (min-width: 980px){
#about h3{font-size: 4.2rem;line-height: 1.2em}
#about h3 span{font-size: 3.2rem;}
#about dl{display:flex;flex-wrap:wrap;margin-bottom: 40px; justify-content:space-between;}
#about dt{width:320px; }
#about dd{width:calc(100% - 400px);display: flex;flex-wrap: wrap;}
	}

    
/* t_r (ためし読み)*と* t_o_c (目次)*/

#su #t_r,
#su #t_o_c,
#su #letter{background:#504934;margin: 80px auto; width:100%; position:relative}   
#su #t_o_c{padding-top: 150px}
div.frame{background: #FFF; padding:5% 4%;width:80%;max-width: 980px;margin: 0 auto;position: relative;}

#main-contents .wapper-special div.frame h2{font-size: 3.8rem; text-align: center;color: #504934;line-height:1em;position:relative; margin: 0 auto 0px;padding:20px 0}



#t_r div::before{content: "";position: absolute;display: block;background:#fffde5;height: 200px;width: 200px;border-radius: 100px;left:0px;right:0 ;margin: 0 auto}
#t_r div h2 span{display: block;font-size: 2rem}
#t_r div h2 img{margin: 0 auto;width: 60%;max-width: 200px;display: block;}
#t_r dl{margin: 30px auto;}
#t_r dt{font-size:2rem;margin-bottom: 5px; font-weight: bold; text-align: center;}
#t_r dt span{font-size:1.4rem;font-weight: normal;display: block}

#t_r dd br{display: block}

#t_o_c .t_o_c{position: relative;width: 200px;height: 150px;margin: 0 auto;}
#main-contents .wapper-special div.frame .t_o_c h2{position: absolute;top:-100px;font-size: 4rem; left: 0;right: 0}
#t_o_c .t_o_c::before{
content: "";display: block;
position:absolute;
width: 200px;
background: #fffde5;
border-radius: 100px;
height: 200px;
top: -120px;
}
#t_o_c .t_o_c img{ position: absolute;width: 150px;left: 0;right: 0;margin: 0 auto;top: -10px;}


#t_o_c dl{width: 100%;margin: 30px auto;max-width: 780px;}
#t_o_c dt{width:100%;}
#t_o_c dd p{color: #504934;}
#main-contents .wapper-special h4{font-size: 2.4rem;line-height: 1.4em;text-align: center;margin-bottom: 30px}
#t_o_c dt p#curves,
#t_o_c dt p#curves1,
#t_o_c dt p#curves2,
#t_o_c dt p#curves3,
#t_o_c dt p#curves4,
#t_o_c dt p#curves5{display: block;color:#504934;font-size: 1.4rem;margin-bottom: 30px;text-align: center; }
#t_o_c dt p#curves2{letter-spacing:0;margin-bottom: 50px;}
#t_o_c dd.illust{position: relative;height: 200px;width:100%;margin: 40px auto 0;}
#t_o_c dd.illust::before{content: ""; background:#fffde5;border-radius: 100px;position:absolute;height:  180px;width:180px;top:-30px;left:0;right:0;margin: 0 auto}
#t_o_c dd.illust img{position: absolute;top: 0px;left:0;height: 180px;right:0;margin: 0 auto;}


@media screen and (min-width: 640px){

}

@media screen and (min-width: 768px){
#t_r div.frame{padding:40px 0;width: 80%}
#su #t_r{ margin-bottom: 100px}

#t_r dt br{display:none}
#t_r dt br.dis{display:block}

}
@media screen and (min-width: 980px){
#t_o_c div.frame{padding:40px 0;width: 80%}
#t_o_c dl{display: flex;flex-wrap: wrap;justify-content: space-between;width: 90%}
#t_o_c dd{max-width: 440px;width: 55%;padding-top:56px;}
#t_o_c dd.illust{height: auto;margin: 0}
#t_o_c dd.illust::before{top: -60px;left:40px;margin: 0}
#t_o_c dd.illust img{top: -60px;left:80px;margin: 0}
#t_o_c dt{max-width:300px;width: 40%;}
#t_o_c dl.re{flex-direction: row-reverse}
#t_o_c dd.illust{}
#t_o_c .re dd.illust::before{top:-100px;right: 30px;left: auto;}
#t_o_c .re dd.illust img{top: -80px;left: auto;right: 90px;}

#t_r dt{display: flex;align-items: center; ;height: 50px}
#t_r dt:last-of-type{display: inline-block;}
#t_r div dl{width: 90%; max-width:780px;display: flex;flex-wrap: wrap;align-items: center;margin: 0 auto}
#t_r dt{text-align: left;width: 78%;}
#t_r dd{width: 22%;} 
#t_r a.btn{width:100%;margin-bottom: 0}


}
  @media screen and (min-width: 1030px){
#t_o_c dt{width: 40%;}
#t_o_c dd{width: 60%;}
  } 
    
    


    

/*message*/
#message h2::before{content: "";display: block;position: absolute; width: 180px;background: #fffde5;border-radius: 100px;height: 180px;top: -80px;z-index: -1;left: 0;right: 0; margin: 0 auto;}
#message h2{font-size: 3.8em}
#message div.frame{padding:0 0 40px 0 ;width: 86%;z-index: 0}
#main-contents .wapper-special #message h3{font-size: 3rem; color: #504934;margin: 30px auto;text-align: center}

#message .profile::before{content: "●　　●　　●"; display: block;font-size: 2rem;text-align: center;margin-bottom: 40px;color:#504934}
#message figure,
#message .profile{width: 90%; max-width: 750px; margin: 40px auto}
@media screen and (min-width: 768px){
#message .profile::before{font-size: 3.8rem;margin-bottom: 80px;}
#main-contents .wapper-special #message h3{font-size: 3.6rem;}
}

/*お便り*/
#su #letter{margin: 80px auto 0;padding:80px 0}
#letter h2::before{content: "";display: block;position: absolute; width: 180px;background: #fffde5;border-radius: 100px;height: 180px;top:-50px;z-index: -1;left: 0;right: 0; margin: 0 auto;}
#letter .t_o_c{position: relative}
#letter h2{font-size: 3.8em}
#letter div.frame{padding:100px 0 50px 0 ;width: 86%;z-index: 0}
#su #letter img{ position: absolute;left: 0;right: 0;margin: 0 auto; width:40%;width:120px;top:-40px;}
#main-contents .wapper-special #letter p{font-size: 2rem;text-align: left;margin:80px auto 40px;width: 90%;}
#main-contents .wapper-special #letter p br{display: none;}
@media screen and (min-width: 768px){

#main-contents .wapper-special #letter p{text-align:center;}
#main-contents .wapper-special #letter p br{display: block;}

}

/*#book*/
#su #book{background: #ededed;width:100%;margin-bottom: 0;position:relative}
#book dl{width: 90%; max-width: 750px;margin: 40px auto 120px}
#book dt{text-align: center; margin-bottom: 40px}
#book dt img{width: 100%; max-width: 250px; margin: 0 auto;border:1px solid #ccc}
#main-contents .wapper-special #book p{width:100%; margin: 0 0 30px;}
#book h3,
#book h3 span{width:100%; margin: 15px 0 30px;}
#book h3{font-size:3rem;line-height: 1.2em}
#book h3 span{font-size: 2.4rem;display: block; margin-bottom: 30px;}
@media screen and (min-width: 768px){
#book dl{display:flex;flex-wrap:wrap; justify-content:space-between;}
#book dt{width:320px; }
#book dd{width:calc(100% - 350px);display: flex;flex-wrap: wrap;}
#book dt img{max-width: 300px;}
}