@charset "utf-8";

#contents {width:1140px; margin:0 -100px;}
#contents > .sub-nav {margin:80px 0;}
#contents > .sub-nav > ul {
	display:-webkit-flex; display:flex; 
	font-size:3.8rem; text-align:center; line-height:1;}
#contents > .sub-nav > ul > li {
	-webkit-flex:1 1 100%; flex:1 1 100%; 
	position:relative; padding:0.7em;}
#contents > .sub-nav > ul > li:before {display:block; content:""; position:absolute; left:0; top:0; bottom:0; border-left:1px solid #e5e5e5;}
#contents > .sub-nav > ul > li:first-child::before {display:none;}
#contents > .sub-nav > ul > li > a {display:block; margin:-0.7em; padding:inherit; text-decoration:none;}
#contents > .sub-nav > ul > li > a:hover {color:#666;}

#contents .entry {padding:80px 0; border-top:1px solid #e5e5e5;}
#contents .entry::after {display:block; content:''; clear:both; height:0;}
#contents .entry > * {margin-right:785px;}
#contents .entry > .image {float:right; margin:0;}
#contents .entry > .image > img {display:block;}
#contents .entry > small {display:block; font-size:1.6rem;}
#contents .entry > h1 {font-size:3.2rem;}
#contents .entry > p {margin-top:2em; font-size:1.6rem; line-height:2.5;}

#contents > .back {
	display:-webkit-flex; display:flex; 
	margin:0 50px; font-size:2.4rem; padding:0.8em;}

/* fonts */
#contents > .sub-nav > ul, 
#contents .entry > small, 
#contents .entry > h1, 
#contents > .back 
	{font-weight:400; font-family:"Noto Sans JP","NoChattering",sans-serif;}

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

#contents {width:auto; margin:0;}
#contents > header > small {font-size:1.1rem;}
#contents > header > h1 {font-size:2.3rem;}
#contents > .sub-nav {margin:5.3333vw 0;}
#contents > .sub-nav > ul {font-size:1.5rem;}
#contents > .sub-nav > ul > li {padding:0.5em;}
#contents > .sub-nav > ul > li:before {}
#contents > .sub-nav > ul > li:first-child::before {}
#contents > .sub-nav > ul > li > a {margin:-0.5em;; }
#contents > .sub-nav > ul > li > a:hover {}

#contents .entry {padding:8vw 0;}
#contents .entry::after {}
#contents .entry > * {margin-right:0;}
#contents .entry > .image {float:none;}
#contents .entry > .image > img {width:100%; height:auto;}
#contents .entry > small {display:none;}
#contents .entry > h1 {margin-top:0.7em; font-size:1.9rem;}
#contents .entry > p {margin-top:0.8em; font-size:1.2rem; line-height:2;}

#contents > .back {margin:0; font-size:1.5rem;}


}