@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');
/* CSS Document */

body {
	margin:0;
	padding:0;
font-size:16px; 
font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
line-height:1.5;
background: #dec6f8 url(./image/comics37/bg.jpg);
color:#000;
}


a{
	text-decoration: none;
	border:none;
    color:#c11200;
}

a:hover{
 opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;}

.nonvisible{display:none;}

section{box-sizing: border-box;}

.pc{display: block;}
.smp{display:none;}

#head{width: 100vw;
  height: auto; margin-bottom:1em;}
#head img{width:100%; height:auto; margin:0  auto; padding:0;}

/*#head .pc{max-width: 1280px}
#head .smp{max-width: 480px}*/

#news{width:80%; max-width: 920px;
    margin:1em auto; padding:3em 2em;
    background:rgba(255,255,255,0.5);
   background-image:url(image/info_01.png),
			url(image/info_02.png);
	background-repeat:no-repeat,
					  no-repeat;
	background-position:left top,
						right bottom;
}
#news ul{list-style-type: none; margin:0; padding:0; height:7em; overflow-y: scroll;}
#news ul li{margin:10px 0; border-bottom:solid 1px #d3af7f; padding:2px 5px;}



#story{width:100%; max-width:900px; margin:2em auto; padding:1em 0 2em 0;
font-family: 'Kiwi Maru', serif;
box-shadow: 0 0 10px #976c3c;
    background: #000 url(image/intro_bg.jpg) no-repeat center / cover;
    color:#fff;
    border:solid 3px #c39700;
}
#story h1{margin:0; padding:0; text-align: center;}
#story h1 img{width:100%; max-width: 620px; height: auto; margin:0 auto; display: block;}
#story h2{font-size:1.8; text-align: center;}
#story h3{font-size:1.4; text-align: center;}
#story p{width:96%; max-width: 720px; margin:auto; }

#charactors{width:96%; max-width: 980px; margin:2em auto;}
#charactors img{width:100%; height: auto; }


.price{text-align: right; color:darkred;}

a.btn{display:block; padding:1em; border-radius: 10px; background: #c11200; text-align: center; 
border:solid 1px #fff; color:#fff; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);}

a.btn:hover{position: relative; top:2px;}
a.btn i{font-family: "Font Awesome 5 Free"; vertical-align: middle; margin-left:10px; font-size:1.5em;}
.comicslist{width:90%; max-width:980px; margin:1em auto;}




/*X*/

#twitter_info{
    background:rgba(247,247,247,0.8); 
    width:100%; 
    padding:1em;
    margin:1em auto;
    text-align: center;
}

#twitter_info .twitter_link{text-align: center; font-weight: 700; font-size:1.2em; background:#d3af4c; border-radius: 12px; color:#fff; width:80%; max-width:780px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3); padding:10px; margin: 1em auto;}

#twitter_info .twitter_link:hover{position: relative; top:2px;}

#twitter_info .twitter_link i {font-family: "Font Awesome 5 Free"; font-weight: 700; vertical-align: middle}


/*関連サイトリンク*/
#website_link{text-align: center;}
#website_link a img{display: inline-block; margin:0 10px 1em 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); width:40%; max-width: 348px; height: auto; border:solid 3px #fff;}
#website_link a img:hover{position: relative; top:2px;}
#website_link p{padding-top:2em;}

/*コミックス*/
#comicsinfo header h2 img{display: block; width:95%; max-width: 960px; margin: 1em auto;}
#comicsinfo .comics{display: flex; align-items:flex-start; width:100%; max-width: 840px; margin:auto;}
#comicsinfo .comics .cover{width:40%; max-width:400px;}
#comicsinfo .comics .cover img{width:100%; height:auto; display: block; margin-bottom:1em; box-shadow: 0 0 6px gray;}

#comicsinfo .comics div{max-width: 460px; margin:1em;}
#comicsinfo .comics div strong{color:#ff6903;}
#comicsinfo .comics .introtxt{text-align: center;}
#comicsinfo .comics .introtxt p{text-align:left;}
#comicsinfo .comics p.comics_episode{text-align: center; line-height:1.8em;}

#comicsinfo .comics h3.head-border {
    position: relative;
    display: inline-block;
    padding: 0 55px;
    color:#007f00;
    margin:0.5em auto 0 auto;
    font-weight:700;
}
 
#comicsinfo .comics h3.head-border:before,
#comicsinfo .comics h3.head-border:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #007f00;
}
 
#comicsinfo .comics h3.head-border:before {
    left: 0;
}
 
#comicsinfo .comics h3.head-border:after {
    right: 0;
}

.price{text-align:center; color:darkred;}

#comicsinfo a{display:block; padding:1em;}


/*プレゼント*/
#present{border:solid 3px #6a1686; background: #fff; width:100%; max-width: 960px; margin:1em auto;}
#present h2 {margin:0; background: #6a1686;}
#present h2 img{width:100%; height:auto; padding:5px 0 10px 0;}
#present .item{padding:1em; background:url(image/present_bg_36.jpg) repeat-y;
text-align: center;}
#present .item img{display: block;margin:1em auto;} 
#present img.present_txt{width:90%; max-width: 620px; height:auto;}
#present .present_sample{width:80%; max-width: 480px; height:auto;}

#present .shimekiri{text-align: center; font-weight: bold; margin:1em; font-size:1.3em;}


#present .shimekiri{margin: 2em auto 1em auto; display: flex; justify-content: center; font-weight:bold; font-size:1.5em;
}
#present .shimekiri div{display: inline-block; padding:10px; font-weight:00;}
#present .shimekiri div:nth-child(odd){background: #d3af4c; color:#2e4ea0;}
#present .shimekiri div:nth-child(even){background: #fff;}


#present .end{background-color: #fff;/*背景色*/
    opacity: 0.5;/*透明度*/}
#present h2.endtxt{text-align: center; color:#ff3}


/*40周年コメント*/

#anniv_40th_cmt{background: #0046a8; width:100%; max-width: 960px; margin:2em auto; padding:1em; font-family: 'Zen Kaku Gothic New';}
#anniv_40th_cmt img.cmt_title{display: block; width:100%; height:auto;}
#anniv_40th_cmt>div{width:90%; max-width:680px; background: rgba(255,255,255,0.9); padding:1em; margin:10px auto; border-radius: 8px;}
#anniv_40th_cmt div p{margin:1.5em auto;}

#anniv_40th_cmt img.sign {width:220px; height:auto; margin:auto; display: block;}

/*立教企画展*/

#anniv_plans{
    width:100%; 
    max-width: 960px; 
    margin:3rem auto;
    border:solid 5px #632824; background:#fff;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(214, 203, 175, 1));}
}

#anniv_plans .rikkyo{padding:1.5em;}
.keyimage{ width:100%; height:auto; display: block; margin:auto;}


#anniv_plans h1{margin: 0 auto; padding:1em 0 0 0;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(214, 203, 175, 1));}


#anniv_plans h1 img{width:calc(100% - 2em); height:auto; margin: 0 auto; display: block;}


#anniv_plans .rikkyo h2{
  border-image: linear-gradient(
      to right,
      #fff,
      #693025,
      #fff
    ) 1 / 4px 0;
  border-style: solid;
  font-size: 1.6rem;
  line-height: 1.5rem;
  padding: .5em;
  text-align: center;
margin:2em auto 1em auto;
    color:693025
}



#anniv_plans .rikkyo h3 {
  position: relative;
  display: inline-block;
  padding: 0 80px;
  margin:1em auto;
  text-align: center;
  left: 50%;                  
  transform: translateX(-50%); 
}

#anniv_plans .rikkyo ul{margin:1em 0; padding:0;
list-style-type:none;}
#anniv_plans .rikkyo ul li{
  text-indent: -1em;
  padding-left: 1em;
}

#anniv_plans .rikkyo h3:before, #anniv_plans .rikkyo h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 65px;
  height: 1px;
  background-color: black;
}

#anniv_plans .rikkyo h3:before {
  left:0;
}
#anniv_plans .rikkyo h3:after {
  right: 0;
}



#anniv_plans dl{margin:1em auto 2em auto; width: 100%; display: flex; align-items:stretch; justify-content: flex-start; }




#anniv_plans dt{
	width: 8em;
    font-weight:700;
    text-align: right;
    border-right:solid 3px #d2c7a9;
    color:#682f28;
    font-size:1.2em;
    padding:10px;}

#anniv_plans dd{ 
    margin: 0 0 0 10px; 
    padding:10px;
}

@media screen and (max-width: 480px){
    #anniv_plans dl{display: block;
    }
    
    #anniv_plans dt{
    text-align: left;
    border-bottom:solid 3px #d2c7a9;
    border-right:none; 
    padding:5px;
}
    
    #anniv_plans dd{margin:0 0 1em 0;}
    
}

#anniv_plans .summary{
    width:calc(100% - 2em);
    max-width:780px;
    margin:30px auto;
}

.ellipsis {
  overflow: hidden;          /* 溢れた部分を隠す */
  text-overflow: ellipsis;   /* 溢れた部分を「...」にする */
  white-space: nowrap;       /* 1行で表示 */
}



#link{width:90%; max-width:820px; margin: 1em auto;}
#link a img{width:100%; height: auto; margin: 1em auto;}


.caption{font-size:0.8em; line-height: 1.5em}

#additional{display: flex;}


.sns{
	text-align:right;
	margin-top: 100px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}

.sns span{ display:inline-block; width:82px;}
	

.page_top {
	position:fixed;
	bottom:10px;
	right:10px;
}


#home{text-align: center}



@media screen and (max-width: 480px){

.pc{display: none;}
.smp{display:block;}
    
body {
font-size:12px; 
}
    
    
#comicsinfo .comics{display:block;}
#comicsinfo .comics .cover{width:90%; max-width:400px; margin:auto;}

.present_txt{margin:.5em}

    
}


footer {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #999;

	width: 100%;
	text-align: center;
}
  @media screen and (min-width: 768px) {
    footer {
      width: 100%;
      margin: -2px auto 0; } }
  @media screen and (max-width: 767px) {
    footer {
      margin-top: -2px; } }
  footer .footer_nav {

}
    footer .footer_nav ul {
      text-align: center;
      padding: 15px 0; }
      footer .footer_nav ul li {
        display: inline-block;
        font-size: 13px;
        padding: 0 10px;
        border-left: 1px solid #666; }
        footer .footer_nav ul li:last-child {
          border-right: 1px solid #666; }
        @media screen and (max-width: 767px) {
          footer .footer_nav ul li:nth-child(1) {
            margin-bottom: 10px; }
          footer .footer_nav ul li:nth-child(2) {
            margin-bottom: 10px;
            border-right: 1px solid #666; } }
        footer .footer_nav ul li a {
	color: #666;
	text-decoration: none;
	cursor: pointer;
}

  footer .copyright {
    font-size: 9px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px; }