/** *** HEADER *** **/
.global-menu .icon-hattori a {transform: translateY(-50%) translateX(-77%);}
.title-katsuhisa-hattori {position:absolute; z-index:3; top:50%; left:50%; transform:translateY(-50%) translateX(-50%);}
.index-header {position:relative; height:100vh; text-align:center; background: url("/images/video-temp.jpg") no-repeat; background-size:cover;}
#loading {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-weight:bold;}
#loading.disappear{display:none;}
#youtube-area{position:fixed; z-index:1; top:0; right:0; left:0; bottom:0; overflow:hidden; opacity:0;}
#youtube-area.appear {animation-name:PageAnimeAppear; animation-duration:.5s; animation-fill-mode:forwards;}
@keyframes PageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#youtube {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
	width:177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height:56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-height:100%; min-width:100%;}
#youtube-mask {position:absolute; z-index: 2; top:0; width:100%; height:100%; background-color:rgba(255,255,255,0.6);}
/** /// 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 /// **/

/** *** GLOBAL FOOTER *** **/
#global-footer {position:relative; z-index:3;}
/** /// GLOBAL FOOTER /// **/

.swiper-pagination-bullet-active {
    background: #a50f35 !important;
}

.update-box {background-color:#fdfbfc; line-height:2rem;}
.update-box .inner-box {position:relative;}
.title-update {position:absolute; top:25px; left:30px; font-family:"Noto Sans SC",sans-serif; font-style:normal; color:#d5d1d5; font-weight:normal; font-size:2.2rem; line-height:2.2rem; text-align:center;}
.title-update span {display:block;}
.title-update small {font-size:1.3rem; line-height:1.3rem;}
.update-list {padding:60px 30px 60px 200px;}
.update-list li {border-bottom:1px solid #ccc; width:100%; padding:25px 0;}
.update-list li a {width:100%; display:table; font-size:1.2rem; color:#2f2d2e;}
.category-icon {display:table-cell; padding-right:20px; vertical-align:middle;}
.update-date {display:table-cell; padding-right:20px; vertical-align:middle; color:#a50f35;}
.update-text {display:table-cell; width:730px; vertical-align:middle;}
.category-icon span {display:inline-block; width:100px; background-color:#a50f35; color:#fff; font-weight: normal; padding:0 10px; 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:#a50f35;}
.update-list .media .category-icon span {background-color:#306;}


.recommend-box {background-color:#f6f7f2; 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;}

.link-box {background-color:#fdfbfc; 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;}
	#global-header .global-menu {display:none;}
	.title-katsuhisa-hattori img {width:100%;}
	.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;}
	.update-list li {padding:15px 20px 15px 0; position:relative;}
	.update-list li:first-child {border-top:1px solid #ccc;}
	.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:1px solid #2f2d2e; -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;}
	.link-box .link-list {display:block; padding:30px 0 30px;}
	.link-box .link-list li {padding:10px 0;}
}