/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/


html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none;}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html, body {
width: 100%;
height: 100%;
scroll-padding-top: 50px; 
}
body{font-size:20px;font-family: 'Noto Serif JP', sans-serif;text-align:center;color:#000;}
img {
vertical-align:bottom;
}
a{
text-decoration:none;
color:#666;
line-height:1.5;
opacity:1;
}
a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.75;
opacity:0.75;
}
a:hover{
opacity:0.5;
}
p,li,div,dt,dd,td,th{
box-sizing:border-box;
}
p {text-align:justify;line-height: 1.5;padding: 0.5rem 0;}
.sp{
display:none;
}
.br_01{
display:none;
}

/*====================================================
HEADER
====================================================*/
#header{
padding:0.5rem 0;
position:fixed;
width:100%;
z-index:10001;
}
#header.sticky{position:fixed;width:100%;z-index:10001;top:0;}


/*====================================================
LAYOUT
====================================================*/
.w520{
width:520px;
margin:0 auto;
}
.logo_area{
	width: 1965px;
	max-width:100%;
	margin: 13px auto 0;
	position: relative;
}
#logo{
  position: absolute;
  left: 6.6%;
  width:9.1%;
  display: flex;
  justify-content: center;
}

#logo h1{width: 85%;}

.logo_line{
	width: 68.4%;
	margin: auto;
}

.sticky .logo_line{
	opacity: 0;
}

#header ul{
	width: 8%;
	position: absolute;
	right: 7.2%;
	display: flex;
	gap: 10%;
	top: 0;
	justify-content: center;
}
#header ul li{
	width: 27%;
	max-width: 30px;
}

.w1100{
width:1100px;
margin:0 auto;
}

/*====================================================
CONTENTS
====================================================*/

#mv {background:url("../img/mv_bg.png");background-size: cover;padding: 20px;}

.mv_inner{
	width: 1965px;
	max-width: 100%;
	background: url(../img/mv_inner.png) center top no-repeat;
	background-size: contain;
	aspect-ratio: 1980 / 900;
	max-height: 900px;
	margin: auto;
}

.mv_inner_img{
	width: 980px;
	margin: auto;
	max-width: 50%;
	position: relative;
	padding-top: 2%;
}

.mv_inner_img .shop{
	position: absolute;
	right: 5%;
	bottom: 0;
	width: 34%;
}

.mv_inner_img .shop img{
  transition: transform 0.2s;
  transform-origin: center; /* 回転の軸を中央に */
}

.mv_inner_img .shop img:hover {
  animation: anchor-anime 0.6s ease-in-out 1;
}

@keyframes anchor-anime {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(10deg); }   /* 左に傾ける */
  40%  { transform: rotate(-10deg); }  /* 右に傾ける */
  60%  { transform: rotate(5deg); }    /* 弱く左へ */
  80%  { transform: rotate(-5deg); }   /* 弱く右へ */
  100% { transform: rotate(0deg); }    /* 元に戻る */
}



.mv_inner_img .emblem{
	position: absolute;
	right: -33%;
	top: 9%;
	width: 25%;
}

section {
padding:10% 0;
}
h2 {
text-align:left;
font-size: 250%;
font-weight:bold;
}

#montblanc{
	background: #e73273;
}

.montblanc_inner{
	width: calc(1130px + 6%);
	max-width: 100%;
	margin: auto;
	padding: 20px 3% 70px;
}

.montblanc_img_box{

}

.montblanc_text_wrap{
	width: 100%;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 70px;
}

.montblanc_text_box{
	width: 31%;
	background: #fff;
	border: 2px solid #bf9f55;
}

.montblanc_text_box .title{
	padding: 10px 8px 13px;
}

.montblanc_text_box p{
	padding: 0 17px 20px;
}

.montblanc_manga_wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.montblanc_manga_title{
	width: 20%;
	margin-right: 0.6%;
}

.episode{
	width: 14.5%;
}

#footer {
color:#503c00;
margin: 0 auto;
text-align: center;
padding:4rem 0;
background: url(../img/footer.png);
background-size: cover;
}
#footer a {color: #654b3a;}
#footer p {
font-size:80%;
text-align: center;
}
#footer p.copyright {
font-size:60%;
font-family:sans-serif;
margin-top:2rem;
}


/*modal*/

.modal-content {
	width: 100%;
}
.modal__content .head {
	display: flex;
	justify-content: space-between;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.modal-content .content{
    margin: 0 auto;
    padding: 30px 40px;
}

.modal-content .sns-box ul{
	display: flex;
}
.modal-content .sns-box ul li{
	display: flex;
}

.modal-content .content .h-btn img:hover {
	opacity: 0.7;
}

.modal-content .content .h-btn {
	width: 15%;
	max-width: 190px;
	margin: 0 auto;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1000;
}
.modal__bg{
    background: #162328;
	opacity: 0.8;
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content {
	height:90%;
    /*background: #162328;*/
    left: 50%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    box-sizing: border-box;
	color: white;
	text-align: center;
	overflow-y: auto;
}
.modal__content .modal-inner {
	height: auto;
    overflow-y: auto;
	margin-top:2rem;
}
.modal__content .modal-inner img{
	width: 100%;
	display: block;
	margin: auto;
	padding-bottom: 0px;
}
.modal__content .modal-inner-2 {
	display: flex;
	justify-content: space-between;
}
/*modal_contents*/

.modal-content .modal-inner .img-area,
.modal-content .modal-inner .text-area{
	width: 48%;
}
.modal-content .modal-inner .text-area .text-01 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.66em;
	text-align: left;
}
.modal-content .modal-inner .img-area .sns-box ul {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
}
.modal-content .modal-inner .img-area .sns-box ul li{
	width: 31px;
	margin: 0 22px;
}
.modal-content .modal-inner .text-area h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 1.5625em;
	color: #D4DEE8;
	border-bottom: 3px solid #96E953;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.modal-content .modal-inner .text-area p {
	padding-bottom: 10px;
	line-height: 1.5em;
}
/*close_button*/
.batsu {
	display: block;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 0px;
    right: 0px;
    border-radius: 50%;
}
 
.batsu::before, .batsu::after { 
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.5px; /* line_width */
	height: 25px;
    background: #fff;
}
 
.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.modal-content h4{
	font-size: 20px;
	padding-bottom: 20px;
}
.modal-content a.prev,
.modal-content a.next{
	display: inline-block;
	background: white;
	padding: 3px 10px;
	margin: 10px;
}
.modal-content a.prev:hover,
.modal-content a.next:hover{
	text-decoration: none;
	background: #efefef;
}
.modal-content a.prev:before,
.modal-content a.next:after{
	content: '';
	position: relative;
  	display: inline-block;
	width: 10px;
	height: 10px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
}
.modal-content a.prev:before{
	transform: rotate(-135deg);
}
.modal-content a.next:after{
	transform: rotate(45deg);
}


.ctr {
text-align:center;
}
.kuri {
color:#b46400;
}
.imo {
color:#8c4664;
}
.maple {
color:#c85a5a;
}
.maccha {
color:#6e9600;
}

.mt1r {
margin-top:1rem;
}
.mt2r {
margin-top:2rem;
}

.shadow {
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

/*====================================================
IMG100
====================================================*/
.img100 img,
.img100{
width:100%;
height:auto;
}

/*====================================================
AFTER
====================================================*/

section:after,
#sect01:after,
#sect01 .kokusan_flex:after,
#sect01 .kokusan_inner:after,
#sect01 .kokusan_kikan:after,
section ul:after,
#sect2:after,
#sect3:after,
#sect4:after,
#footer:after{content:".";display:block;clear:both;height:0;visibility:hidden;font-size:0;}

/*====================================================
MEDIA QUERY
====================================================*/

@media screen and (max-width:1280px) {
.w1280 {
width:90%;
}
}
@media screen and (max-width:1100px) {
.w1100{
width:90%;
margin:0 auto;
}
}

@media screen and (max-width:750px) {
body{
font-size:17px;
}
img {
width: 100%;
height: auto;
}
#mv {background:url("../img/mv_bg_sp.png");background-size: cover;padding: 20px;}
.logo_area{
	width:100%;
	margin: 0 auto 0;
	position: relative;
}
#logo{
  position: absolute;
  left: 5%;
  width:100px;
  display: flex;
  justify-content: center;
}

#logo h1{
width:100px;
float:left;
}

.logo_line{
	width: 68.4%;
	margin: auto;
}

.sticky .logo_line{
	opacity: 0;
}

#header ul{
	width: 103px;
	position: absolute;
	right: 5%;
	display: flex;
	gap: 6.5px;
	top: 0;
	justify-content: center;
}
#header ul li{
	width: 27%;
	max-width: 30px;
}

#header ul{
float:right;
}
#header ul li{
float:left;
width:30px;
}


#montblanc{
	background: #e73273;
}

.montblanc_inner{
	width: calc(1130px + 6%);
	max-width: 100%;
	margin: auto;
	padding: 20px 3% 70px;
}

.montblanc_img_box{

}

.montblanc_text_wrap{
	width: 100%;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
	flex-wrap: wrap;
	gap: 15px;
}

.montblanc_text_box{
	width: 100%;
	background: #fff;
	border: 2px solid #bf9f55;
	font-size: 0.9em;
}

.montblanc_text_box .title{
	padding: 10px 8px 13px;
}

.montblanc_text_box p{
	padding: 0 10px 10px;
}

.montblanc_manga_wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 1%;
}

.montblanc_manga_title{
	width: 31%;
}

.episode{
	width: 31%;
}

#wrapper {
}
section {
padding:15% 0;
}
h2 {
text-align:left;
font-size: 180%;
font-weight:bold;
}

#footer {
padding:2rem 0;
}
.pc{
display:none;
}
.sp{
display:block;
}
.br_01{
display:block;
}
.logo_line{
	display: none;
}

#mv {
	background:url("../img/mv_bg.png");
	background-size: cover;
	padding: 20px 3%;
}

.mv_inner{
	max-width: 100%;
	background: transparent !important;
	background-size: contain;
	margin: auto;
	background: none;
}

.mv_inner_img{
	width: 100%;
	margin: auto;
	max-width: 100%;
	position: relative;
	padding-top: 7%;
}

.mv_inner_img .shop{
	position: absolute;
	right: 5%;
	bottom: 0;
	width: 34%;
}
.mv_inner_img .shop{
	width: 35%;
	right: 8%;
	bottom: 26%;
}

.emblem{
	display: none;
}

footer p{
	padding: 0.5rem 0;
}

.modal__content {
width: 100%;
}

}
@media screen and (max-width:520px) {
.w520 {
width:92%;
}
}