@charset "UTF-8";

html, body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	letter-spacing: 1px;
}
body {
	font-size: 1rem;/*16px*/
	line-height: 1.6;
	background-color: #fff;  
}

@media only screen and (max-width: 821px) {
		body {
		font-size: 0.875rem;/*14px*/
		line-height: 1.6;
	}
}

@media only screen and (max-width: 768px) {
	.for_pc{ display: none; }	
}
@media only screen and (min-width: 769px) {
	.for_sp{ display: none; }
}

/*------------------------------------------------------*/

#container{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse; /* 横並び逆順に */
	flex-wrap: nowrap;
}
#main_area{	width:80%; }
#nav_area{ 
	width: 20%;
	background: #f2f2f2;
}
@media screen and (max-width:768px){
#container{	
	display: block;}
#main_area{	width: 100%; }
#nav_area{ width: 100%;
}
}

/*-----header--------------------------------*/
#header{
	/*position: relative;*/
	background: #fff;
}
#header .wrapper {
    display: grid;
    grid-template-columns: 54% 46%;
    grid-template-rows: 37% 63%;
}
#header .top01{
	background: #fff;
	position: relative;
}
#header .main_cover{/*表紙*/
	position: absolute;
	top: 0;
    /*left: 3%;*/
    right: 58%;
	width: 40%;
    max-width: 690px;
}
#header .top02{
	/*margin: 2em auto 3em;*/
	margin: 1em auto 5em;
}
#header .top03{
	background: #fe5e6a;
}
#header .top04{
	background: #fe5e6a;
}
#header h1.pc_logo{/*nav h1.sp_logo---SP*/
	/*max-width: 100%;*/
	max-width: 85%;
    margin: auto;
}
#header h2.publish{/*nav h2.publish---SP*/
	display: block;
	margin-bottom: 1em;
	color: #fff;
}
#header .prologue{
	/*display: block;
	padding: 2em 3em;*/
	position: relative;
	width: 90%;
    margin: 1em;
    font-size: 0.9rem;
	color: #fff;
}
#header .prologue:before{
	position: absolute;
    content: '';
    background: url("../img/icon_season.png");
	width: 120px;
	height: 120px;
	right: 0px;
	top: -88px;
}
#header .picup_map{
	margin: 0 auto;
    text-align: center;
}
@media screen and (max-width:768px){
	
#header .wrapper {
    display: block;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
#header .top01{
}
#header .top02{
	margin: 2em auto 1em;
}
#header .top03{
}
#header .top04{
}
#header h1.pc_logo{/*nav h1.sp_logo---SP*/
	max-width: 60%;
    margin: auto;
}
#header h2.publish{/*nav h2.publish---SP*/
	display: block;
	margin-bottom: 1em;
}
#header .main_cover{/*表紙*/
	position: static;
	top: 0;
    left: 0;
    width: 100%;
    max-width: none;
}
#header .top04 .prologue{
    margin: auto;
    padding: 1em;
}
#header .prologue:before{
	right: 5px;
	top: -88px;
}
	
#header .picup_map{
}
}

/*-----header_sub--------------------------------*/
#header_sub{}
#header_sub .wrapper {
    display: block;
}
#header_sub .top{
	margin: 3em 0 8em 5em;
	position: relative;
}
#header_sub h1.logo{
	max-width: 100%;
}
#header_sub h2.publish{
	position: absolute;
	left: 174px;
    bottom: -25px;
}
@media screen and (max-width:768px){
	
#header_sub .top{
	margin: 3em 0;
}
#header_sub h1.logo{
	max-width: 80%;
	margin: auto;
}
#header_sub h2.publish{
	position: initial;
	left: 0;
    bottom: 0;
	text-align: center;
}
}


/*-----*パンくず*--------------------------------*/

.breadcrumblist{
	margin: 0.5em 2em;;
}
.breadcrumb {
	font-size: 0.7rem;
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li:after {
	content: '>';
	padding: 0 0.2em;
}
.breadcrumb li:last-child:after {
	content: '';
}
.breadcrumb li a {
	text-decoration: none;
	color: #555;
}
.breadcrumb li a:hover {
	color: #ff3600;

}
.breadcrumb span {
}
@media screen and (max-width: 768px) {	
}


/*-----*レイアウト*--------------------------------*/

section{
	width: 100%; 
}
/*section:nth-child(2n){
  background:#f3f3f3; 
}*/
article{
	margin: 5em 0;
	background: #5585D8;
}
p{ margin-bottom: 1em; }
p.indent { text-indent: 1em; }

/*-----*特集Ⅰ*レイアウト*----*/
#special_feature01 ul.sf01{
	display: flex;
	margin: 5em auto 7em;
	max-width: 1000px;
	/*max-width: 1100px;*/
}
#special_feature01 ul.sf01 li:nth-child(odd) {
	width: 32%;
	/*width: 30%;*/
	padding: 0 2em 0 0;
	/*font-weight: bold;*/
}
#special_feature01 ul.sf01 li:nth-child(odd) img {
	display: none;	
}
#special_feature01 ul.sf01 li:nth-child(even) {
	width: 66%;
	/*width: 70%;*/
}
@media only screen and (max-width: 768px) {

#special_feature01 ul.sf01{
	margin: 5em 2em 3em;
	max-width: 100%;
}
#special_feature01 ul.sf01 li:nth-child(odd) img {
	display: block;	
}
#special_feature01 ul.sf01 li:nth-child(odd) {
	width: 100%;
	padding: 0 0 2em 0;
}
#special_feature01 ul.sf01 li:nth-child(even) {
	width: 100%;
	display: none;
}
}

/*-----*特集Ⅱ*レイアウト*-----*/
#special_feature02 ul.sf02{
	display: flex;
	margin: 5em auto 7em;
	max-width: 1000px;
	/*max-width: 1100px;*/
}
#special_feature02 ul.sf02 li:nth-child(odd) {
	width: 66%;
	/*width: 70%;*/
}
#special_feature02 ul.sf02 li:nth-child(even) {
	width: 32%;
	/*width: 30%;*/
	padding: 0 0 0 2em;
	/*font-weight: bold;*/
}
#special_feature02 ul.sf02 li:nth-child(even) img {
	display: none;	
}

@media only screen and (max-width: 768px) {
	
#special_feature02 ul.sf02{
	margin: 2em 2em 5em;
	display: block;	
	max-width: 100%;
	/*flex-direction: column-reverse;順番入れ替え*/
}
#special_feature02 ul.sf02 li:nth-child(even) img {
	display: block;	
}
#special_feature02 ul.sf02 li:nth-child(odd) {
	width: 100%;
	display: none;
}
#special_feature02 ul.sf02 li:nth-child(even) {
	width: 100%;
	padding: 0 0 2em 0;
}
}

/*-----*特集ⅠⅡ共通*-----*/
#special_feature01 .inner,#special_feature02 .inner{
	margin: 2em 0 3em 0;
}
@media only screen and (max-width: 768px) {
	
#special_feature01 .inner,#special_feature02 .inner{
	margin: 0 0 2em 0;
}
}


/*-----*h2:特集・小特集*-----*/
h2.sf01ttl,h2.sf02ttl {
	position: relative;
	font-size: 1.2rem;
	letter-spacing: 2px;
	margin-bottom: 1.3em;
}
h2.sf01ttl span,h2.sf02ttl span {
	display: block;
	font-size: 0.7rem;
}
h2.sf01ttl:before,h2.sf02ttl:before {
	content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 60px;
    height: 4px;
    left: 32px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	background: #ea0f54;
    border-radius: 2px;
}
h2.sf01ttl:before {
	background: #ea0f54;
}
h2.sf02ttl:before {
	background: #ff7800;
}
@media only screen and (max-width: 768px) {

h2.sf01ttl,h2.sf02ttl {
	font-size: 1.1rem;
	margin-bottom: 1.5em;
}
}

/*-----*h3_特集・小特集の記事タイトル*-----*/
h3.sftopttl{
	/*font-size: 1.8rem;*/
	font-size: 1.6rem;
	margin-bottom: 1em;
}
@media only screen and (max-width: 768px) {

h3.sftopttl{
	font-size: 1.3rem;
	margin: 0.6em 0;
}
}


/*-----*小枠*-----*/
#feature{
	display: flex;
}
#feature .featurebox {
	width: 90%;
	background: #e8f5f2;
	border-top-right-radius: 44px;
	padding: 2em 4em;
	margin: 0 4em 5em 0;
}
#feature ul.fbox{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	max-width: 1200px;
    margin: auto;
}
#feature ul.fbox li {
	width: calc(33.3% - 48px);
	margin: 1em 1.5em;
}
#feature ul.fbox li p {
	font-weight: 700;
	font-size: 0.8rem;
	margin-top: 0.5em;
}
#feature .space {/*余白*/
	width: 10%;
}
@media only screen and (max-width: 768px) {

#feature{
	display: block;
}
#feature .featurebox {
	width: 100%;
	border-top-right-radius: 0;
	padding: 0;
	margin: 0;
}
#feature ul.fbox{
	max-width: 100%;
    /*justify-content: center;*/
}
#feature ul.fbox li {
	width: calc(46% - 27px);
    margin: 1em 1.5em;
}
#feature ul.fbox li p {
}
#feature .space {/*余白*/
	width: 100%;
}
}

/*-----*h3_小枠の記事タイトル -----*/
h3.ftopttl{
	position: relative;
	font-size: 1.1rem;
	letter-spacing: 1px;
	margin-bottom: 1.5em;
}
h3.ftopttl:before {
	content: '';
    position: absolute;
    bottom: -5px;
    display: inline-block;
    width: 40px;
    height: 3px;
    left: 20px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fabe00;
    border-radius: 2px;
}
@media only screen and (max-width: 768px) {
	
h3.ftopttl{
	font-size: 0.8rem;
}
}

	
/*-----バックナンバー---------------*/
#backnumber{
	display: flex;
}
#backnumber .space {/*余白*/
	width: 10%;
}
#backnumber .featurebox {
	width: 90%;
	background: #e1e1e1;
	border-top-left-radius: 44px;
	padding: 4em;
	margin: 0 0 5em 4em;
}
#backnumber ul.bbox{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#backnumber ul.bbox li {
	width: calc(13% - 10px);
	margin: 1em;
}
#backnumber ul.bbox li p {
	font-weight: 700;
	font-size: 0.7rem;
}
@media only screen and (max-width: 768px) {

#backnumber{
	display: block;
	margin: 5em 0;
}
#backnumber .space {/*余白*/
	width: 100%;
}
#backnumber .featurebox {
	width: 100%;
	border-top-left-radius: 0;
	padding: 2em 0;
	margin: 0;
}
#backnumber ul.bbox{}
#backnumber ul.bbox li {
	width: calc(33.3% - 42px);
	margin: 1.5em;
}
#backnumber ul.bbox li p {
}
}

/*----- h2:バックナンバー----- */
h2.backnumber {
	font-size: 1.8rem;
	letter-spacing: 2px;
}
h2.backnumber span {
	margin-left: 3em;
	font-size: 0.7rem;
}
@media only screen and (max-width: 768px) {
	
h2.backnumber {
	font-size: 1.5rem;
	margin-left: 0.8em;
}
h2.backnumber span {
	display: block;
	margin-left: 0;
}
}


/*-----SNS---------------*/
#sns{
	/*width: 80%;*/
	max-width: 960px;
	margin: 5em auto 10em;
}
#sns .snstitle {
	position: relative;
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
	align-items: flex-end;
	}
#sns .snscopy {
	position: absolute;
	/*width: 20%;*/
    border: dashed 1px;
    border-radius: 15px;
    text-align: end;
    padding: 0.2em 2em 0.1em;
	font-size: 0.8rem;
    margin: 0 1em 0.7em 0;
	right: 0;
}
#sns .snscopy a {
	text-decoration: none;
	color: #555;
}
#sns .snscopy a:hover {
	color: #ff3600;
}
#sns h2.snsttl {
	position: relative;
	font-size: 1.8rem;
	letter-spacing: 2px;
	margin-left: 1.7em;
}
#sns h2.snsttl:before {
	position: absolute;
    content: url("../img/icon_instagram.png");
    top: 5px;
	left: -35px;
}
#sns .update {
	position: relative;
    width: 40px;
    margin: 0 3em 0 0.5em;
    padding: 10px 3px;
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    line-height: 0.9rem;
    letter-spacing: 0;
}
#sns .update::before {
	content: "";
	display: block;
	width: 45px;
	height: 45px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: 50%;
	background: #ff0000;
}
@media only screen and (max-width: 768px) {
	
#sns{
	width: 90%;
}
#sns .snstitle {
    margin-bottom: 3em;
	}
#sns .update {
    margin: 0 3em 0 2em;
}
#sns .snscopy {
    text-align: center;
    width: 62%;
    padding: 0.2em 2em 0.1em;
    font-size: 0.7rem;
    margin: 0;
    right: 0;
    left: 0;
    top: 55px;
}
#sns h2.snsttl {
	font-size: 1.5rem;
}
#sns h2.snsttl:before {
    top: 2px;
	left: -40px;
}
}

#sns ul.snsbox{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#sns ul.snsbox li {
	width: calc(25% - 32px);
	margin: 1em;
}
#sns ul.snsbox li p {
	font-weight: 700;
	font-size: 0.7rem;
}
@media only screen and (max-width: 768px) {
	
#sns ul.snsbox{
}
#sns ul.snsbox li {
	width: calc(50% - 28px);
}
#sns ul.snsbox li p {
}
}

/*youtubeとtwitter*/
#sns .banner{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
    margin-top: 2em;
}
#sns .youtube{
	position: relative;
	border: dashed 1px;
	padding: 1em 2em;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: bold;
	margin-right: 2em;
	padding-left: 4em;
}
#sns .youtube:before{
	position: absolute;
    content: url("../img/icon_youtube.png");
    top: 8px;
	left: 15px;
}
#sns .twitter{
	position: relative;
	border: dashed 1px;
	padding: 1em 2em;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: bold;
	padding-left: 4em;
}
#sns .twitter:before{
	position: absolute;
    content: url("../img/icon_x.png");
    top: 10px;
	left: 16px;
}
#sns a.a_sns {
	color: #333;
	text-decoration: none;
}
#sns a.a_sns:hover {
	/*color: #ea0f54;*/
	color: #ff6600;
}
@media only screen and (max-width: 768px) {

#sns .banner{
	display: block;
	}
#sns .youtube{
	margin-right: 0;
	width: 57%;
	margin: 1em auto;
	font-size: 0.8rem;
}
#sns .youtube:before{
    top: 8px;
	left: 13px;
}
#sns .twitter{
	width: 57%;
	margin: 3em auto;
	font-size: 0.8rem;
}
#sns .twitter:before{
    top: 13px;
	left: 13px;
}

}
/*-----Footer-----*/
#footer{
	background: #e1f9ff;
}

#footer .notice{
	display: none;
}
@media screen and (max-width:768px){
#footer .notice{
	display: block;
    padding: 2em 0;
    font-size: 0.7rem;
    width: 50%;
    margin: 0 auto;
}
}




#footer .foot{
	padding: 3em 0;
	text-align: center;
}
#footer small{ 
	display: block;
	font-size: 0.8rem;
	margin-top: 1em;
}
@media only screen and (max-width: 768px) {

#footer{}
#footer .foot{
	padding: 2em 0;
}
#footer .foot > img{
	max-width: 40%;
}
#footer small{ 
	font-size: 0.7rem;
}
}



.linkttl{
	margin-top: 2em;
	text-align: center;
	font-weight: bold;
}

/*ボタン*/
a.btn01 {
	display: block;
	text-align: center;
    vertical-align: middle;
    text-decoration: none;
    /*width: 110px;*/
    max-width: 150px;
    margin: 0.5em auto;
    padding: 0.6rem 2rem;
    font-weight: bold;
    border: 1px solid #333;
    background: #fff;
    color: #333333;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 0.8rem;
}
a.btn01:hover {
	color: #fff;
	/*background: #ea0f54;*/
	background: #ff6600;
}
@media only screen and (max-width: 768px) {
	
a.btn01 {
    width: 130px;
}
}

/*ボタン*/
a.btn03 {
	display: block;
	text-align: center;
    vertical-align: middle;
    text-decoration: none;
    /*width: 110px;*/
    max-width: 150px;
    margin: 0.5em auto;
    padding: 0.6rem 2rem;
    font-weight: bold;
    border: 1px solid #333;
    background: #fff;
    color: #333333;
    border-radius: 100vh;
    transition: 0.5s;
    font-size: 0.8rem;
}
a.btn03:hover {
	color: #fff;
	background: #ff6600;
}
@media only screen and (max-width: 1300px) {
	
a.btn03 {
    width: auto;
}
}


/*テキストボタン*/
.btn02 {
	padding: 0.1em 0.3em;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,152,0,1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
	color: #ff6600;
	font-size: 0.8rem;
	text-decoration: none;
}
.btn02:hover {
	background-position: -100% 0;
	color: #fff;
}


/*------トップへ戻る-------------------------------*/

#page-top{
	position: fixed;
	background: rgba(0,0,0,.5);
	/*background: rgba(150,220,250,.7);*/
	min-width: 50px;
	min-height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	bottom: 2%;
	right: 2%;
}