/** *** HEADER *** **/
#main-visual-area {position:relative; height:100vh; text-align:center; background-size:cover; display:flex; background-color:#121212;}
.keyvisual-image {width:50%; height:100%; overflow:hidden;}
.keyvisual-image img {width:100%; height:100%; object-fit:cover;}
.ryoichi-logo {width:50%; position:relative;}
.title-ryoichi-hattori {position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); max-width:440px; width:80%;}
.title-ryoichi-hattori img {width:100%;}
/** /// HEADER /// **/

/** *** COMTAINER *** **/
#main-contents {position:relative; z-index:3; background:#fff; padding:0; margin:0;}
#main-contents a {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; opacity:1;}
#main-contents a:hover {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; opacity:0.4;}
.inner-box {}
/** /// COMTAINER /// **/

.update-box {background-color:#000; line-height:2rem; padding:1px 0;}
.update-box .inner-box {position:relative;}

.update-box .link-list {display:-webkit-flex; display:flex; padding:30px 0 0;}
.update-box .link-list li {text-align:center; width:100%;}

.title-update {position:absolute; top:0; left:40px; color:#fcb660; font-size:2.2rem; line-height:2.2rem; text-align:center; margin:0 auto;}
.title-update span {display:block;}
.title-update small {font-size:1.3rem; line-height:1.3rem;}
.update-list {margin:50px auto; padding:0 50px 0 200px; border-left:1px solid #cd944f; border-right:1px solid #cd944f;}
.update-list li {border-bottom:1px solid #cd944f; width:100%; padding:25px 0;}
.update-list li:first-of-type {padding:0 0 25px;}
.update-list li.no-link {display:table; font-size:1.2rem;}
.update-list li a {width:100%; display:table; font-size:1.0rem; color:#fff2e2;}
.category-icon {display:table-cell; padding-right:20px; vertical-align:middle;}
.update-date {display:table-cell; padding-right:20px; vertical-align:middle; color:#fcb660;}
.update-text {display:table-cell; width:730px; vertical-align:middle;}
.category-icon span {display:inline-block; width:100px; background-color:#fcb660; color:#fff; font-weight: normal; padding:3px 10px 0; text-align:center; font-size:0.9rem; font-family:"Noto Sans SC",sans-serif; line-height:1.5rem;}
.update-list .news .category-icon span {background-color:#fcb660;}
.update-list .media .category-icon span {background-color:#fcb660;}


.recommend-box {background-color:#efefef; padding:70px 0 50px;}
.recommend-box .inner-box {text-align:center;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:0; position:relative; margin:20px auto 20px;}

.relation-box {background-color:#000; padding:10px 0;}
.relation-box .link-list {display:-webkit-flex; display:flex; padding:60px 0;}
.relation-box .link-list li {text-align:center; width:100%;}

.link-box {background-color:#000; padding:10px 0;}
.link-box .link-list {display:-webkit-flex; display:flex; padding:60px 0;}
.link-box .link-list li {text-align:center; width:100%;}


@media screen and (max-width:720px){
	#global-header {display:block;}
	.keyvisual-image {width:100%; height:100vh;}
	#main-visual-area {display:block; height:100%;}
	.ryoichi-logo {width:100%; height:100%; padding:40px 0 10px; background:#000;}
	.title-ryoichi-hattori {position:relative; top:auto; left:auto; transform:translateY(0) translateX(0); max-width:none; width:auto;}
	.title-ryoichi-hattori img {width:60%;}
	.inner-box {width:100%; display:block;}

	.title-update {position:relative; top:auto; left:auto; text-align:left; margin:0; padding:40px 10px 20px;}
	.title-update span {display:inline-block; padding-right:20px;}
	.update-list {padding:0 10px 40px 10px; margin:0 auto;border-left:none;border-right: none;}
	.update-list li {padding:15px 20px 15px 0; position:relative;}
	.update-list li:first-child {padding:15px 20px 15px 0; border-top:1px solid #cd944f;}
	.update-list li a {display:block; font-size:1rem; line-height:1.6rem;}
	.update-list li a:after {content:""; position:absolute; right:10px; top:50%; width:10px; height:10px; display:inline-block; margin-top:-4px;
		border-top:1px solid #2f2d2e; border-right:none; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
	.category-icon {display:inline-block;}
	.category-icon span {font-size:0.8rem;}
	.update-date {display:inline-block; font-size:0.8rem;}
	.update-text {display:block; width:100%; padding:10px 0 0;}

	.recommend-box {padding:40px 0 10px;}
	.relation-box .link-list {display:block; padding:30px 0 30px;}
	.relation-box .link-list li {padding:30px 0;}
	.link-box .link-list {display:block; padding:30px 0 30px;}
	.link-box .link-list li {padding:10px 0;}
}