@charset "UTF-8";
/*------------------------------------------------------------------------------
	Chuo Kanko Corporation. - CONCEPT CSS
	URL: http://kaneyamaen.sbs/
	Date: 2017-03-13
	Copyright (C) Chuo Kanko Corporation. All Rights Reserved.
------------------------------------------------------------------------------*/

/*==============================================================
　body#conceptIndex : 鐘山苑の過ごし方
===============================================================*/
body#conceptIndex .pan {
	position: absolute;
	z-index: 9;
}
body#conceptIndex #kandoArea {
	margin-bottom: 4%;
	padding-top: 40px;
}
body#conceptIndex #copyBox {
	background: #010101;
	position: relative;
	height: 59vw;
	overflow: hidden;
}
body#conceptIndex #copyBox:after {
	background: url(../../concept/img/pho_mainvisual.png) no-repeat left top;
	background-size: 100% auto !important;
	content: '';
	width: 100%;
	height: 59vw;
	display: block;
	position: absolute;
	left: 0;
	top: px;
}
body#conceptIndex .staff_visual {
	position: relative;
	top: 30px;
	text-align: center;
}
body#conceptIndex .staff_visual img {
    height: auto;
    @media not (max-width:992px) {
	    width: 90%;
    }
}
body#conceptIndex #copyBox .copy {
	position: absolute;
	width: 13.25%;
	position: absolute;
	top: 46%;
	left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 9;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	flex-direction: row-reverse;
}
body#conceptIndex #copyBox .copy img {
	opacity: 0.5;
	display: block;
	height: auto !important;
}
body#conceptIndex #copyBox .copy img.copy001 {
	width: 20%;
}
body#conceptIndex #copyBox .copy img.copy002 {
	margin-top: 14%;
	width: 40%;
}
body#conceptIndex #copyBox .copy img.copy003 {
	width: 20%;
	margin-top: 30%;
}

body#conceptIndex #kandoArea .innerWidth {
	text-align: center;
}
body#conceptIndex #kandoArea .textBox {
	margin-top: 8%;
}
body#conceptIndex #kandoArea .textBox.pc {
	display: block;
	margin: 6% 0;
	text-align: center;
}
body#conceptIndex #kandoArea .textBox.pc img {
	max-width: 100%;
	height: auto;
}
body#conceptIndex #kandoArea .textBox.sp {
	display: none;
}
@media screen and (max-width: 850px) {
	body#conceptIndex #kandoArea .textBox.pc {
		display: none;
	}
	body#conceptIndex #kandoArea .textBox.sp {
		display: inline-block;
	}
}

body#conceptIndex #kandoArea .textBox p {
	line-height: 2.1;
	font-size: 107%;
	margin-bottom: 4.6%;
	text-align: left;
	color: #221814;
}
body#conceptIndex main #introArea {
	text-align: center;
	position: relative;
	background: url(../../concept/img/bg_brash.png) no-repeat center top;
	font-family: 'Mykokoro', serif;
}
body#conceptIndex main #introArea .innerWidth {
	padding: 6% 14%;
}
body#conceptIndex main .photo {
	margin-bottom: 14px;
	background: #000;
}
body#conceptIndex main .photo img {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
body#conceptIndex main a:hover .photo img {
	opacity: 0.7;
}
body#conceptIndex main #introArea .deco {
	position: absolute;
}
body#conceptIndex main #introArea .momiji01 {
	top: 10%;
	right: 0;
}
body#conceptIndex main #introArea .momiji02 {
	bottom: 8%;
	left: 0;
}
body#conceptIndex main #introArea .lead {
	font-size: 190%;
	margin-bottom: 3%;
}
body#conceptIndex main #introArea .lead em {
	line-height: 1;
	display: block;
	font-size: 60%;
	color: #9a97dd;
}
body#conceptIndex main #introArea .bdr-RL:before,
body#conceptIndex main #introArea .bdr-RL:after {
	background: #d1def9;
	width: 20%;
}
body#conceptIndex main #introArea .lead span {
	padding: 0 20px;
}
body#conceptIndex main .contentsBox {
	margin-bottom: 6.4%;
}
body#conceptIndex #sightseeingArea {
	margin: 0 auto 6.4%;
}
body#conceptIndex .sightseeingList {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 2%;
}
body#conceptIndex .sightseeingList li {
	width: 24.1%;
	margin-bottom: 3%;
}
body#conceptIndex .sightseeingList li a {
	color: #544f49;
}
body#conceptIndex .sightseeingList li .photo img {
	width: 100%;
	height: auto;
}
body#conceptIndex .sightseeingList li strong {
	font-size: 100%;
	border-bottom: 1px solid #dfdbc7;
	background: url(../img/ico/ico_arrow_blk_rgt.png) no-repeat 97% center;
}
body#conceptIndex .sightseeingList li strong:after {
	background: #d99f61;
}
body#conceptIndex main .otherContents {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
body#conceptIndex main .otherContents li {
	width: 47%;
	margin-bottom: 3%;
}
body#conceptIndex main .otherContents li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border: 1px solid #dfdbc7;
	padding: 8px;
}
body#conceptIndex main .otherContents li strong {
	font-size: 120%;
	width: 60%;
	display: block;
	font-family: 'Mykokoro', serif;
	font-weight: normal;
}
body#conceptIndex main .otherContents li strong em {
	display: inline-block;
	font-style: normal;
	padding-right: 23px;
	background: url(../img/ico/ico_arrow_blk_rgt-thn.png) no-repeat right center;
}
body#conceptIndex main .otherContents li strong .copy {
	display: block;
	font-family: 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic',
		sans-serif;
	font-size: 80%;
}
body#conceptIndex main .otherContents li .photo {
	margin-right: 10px;
	margin-bottom: 0;
}
body#conceptIndex main .otherContents li .photo img {
	display: block;
}
body#conceptIndex main h3 {
	font-family: 'Mykokoro', serif;
	font-weight: normal;
	font-size: 140%;
	text-align: center;
	margin-bottom: 40px;
}
body#conceptIndex main h3 .engTitle {
	display: block;
	font-size: 70%;
	font-style: normal;
}
body#conceptIndex main h3.bdr-RL:after,
body#conceptIndex main h3.bdr-RL:before {
	background: #d99f61;
}
/* 感染症対策 */
body#conceptIndex main #mainVisual {
	position: relative;
}
body#conceptIndex main #mainVisual img.visual {
	display: block;
	width: 100%;
	height: auto;
}
body#conceptIndex main #mainVisual .copy {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 28vw;
	height: auto;
}
body#conceptIndex #mainVisual #scrollBtn {
	position: absolute;
	bottom: 4%;
	width: 100%;
}
body#conceptIndex #mainVisual #scrollBtn a {
	display: block;
	text-align: center;
	color: #fff;
	letter-spacing: 4px;
	font-size: 80%;
	padding-bottom: 25px;
	text-shadow: 0px 0px 2px #338414;
	background: url(../../concept/img/ico_scrolldown.png) no-repeat center
		bottom;
}
body#conceptIndex main #infectionArea #intro_box {
	font-family: 'MyKokoro';
	text-align: center;
	font-size: 120%;
	margin: 90px 0;
}
body#conceptIndex main #infectionArea #green_zone {
	font-family: 'MyKokoro';
	text-align: center;
	font-size: 120%;
	margin: 90px 0;
}

body#conceptIndex main #infectionArea #intro_box .lead {
	font-weight: normal;
	font-weight: 200;
	font-size: 140%;
	margin: 0 0 20px;
}
body#conceptIndex main #infectionArea h3 span {
	font-size: 80%;
}
body#conceptIndex main .infection_box + .infection_box {
	margin-top: 90px;
}
body#conceptIndex main #infectionArea .rev {
	flex-direction: row-reverse;
}
body#conceptIndex main #infectionArea .kome_text {
	font-size: 90%;
}
body#conceptIndex main #infectionArea .sub_box {
	padding: 0 3%;
}
body#conceptIndex main #infectionArea .main_box p,
body#conceptIndex main #infectionArea .sub_box p {
	font-size: 90%;
}
body#conceptIndex main #infectionArea .container_55,
body#conceptIndex main #infectionArea .container_68,
body#conceptIndex main #infectionArea .container_65 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
body#conceptIndex main #infectionArea .container {
	display: flex;
	justify-content: space-between;
}
body#conceptIndex main #infectionArea .container .photo {
	width: 49.5%;
}
body#conceptIndex main #infectionArea .container_55 .main_box {
	width: 55%;
}
body#conceptIndex main #infectionArea .container_68 .main_box {
	width: 68%;
}
body#conceptIndex main #infectionArea .container_65 .main_box {
	width: 65%;
}
body#conceptIndex main #infectionArea .container_55 .sub_box {
	width: 45%;
}
body#conceptIndex main #infectionArea .container_68 .sub_box {
	width: 32%;
}
body#conceptIndex main #infectionArea .container_65 .sub_box {
	width: 35%;
}

body#conceptIndex main #infectionArea .photo img {
	display: block;
	width: 100%;
	height: auto;
}
body#conceptIndex main #infectionArea .container_3column {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
body#conceptIndex main #infectionArea .container_3column::after {
	display: block;
	content: '';
}
body#conceptIndex main #infectionArea .container_3column::after,
body#conceptIndex main #infectionArea .container_3column .column_box {
	width: 32%;
}
body#conceptIndex main #infectionArea .container_3column.tight .column_box {
	width: 33%;
	margin-bottom: 0;
}
body#conceptIndex main #infectionArea .container_2column_center {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 18%;
}

body#conceptIndex main #infectionArea .container_2column_center .column_box {
	width: 48%;
}
body#conceptIndex main #infectionArea .column_box {
	margin-bottom: 20px;
}
body#conceptIndex main #infectionArea .column_box p {
	font-size: 90%;
}
body#conceptIndex main #infectionArea .slick-slider .slick-slide {
	margin: 0;
}
body#conceptIndex main #infectionArea #arrival_area .container_55 {
	margin-bottom: 20px;
}
body#conceptIndex main #infectionArea #arrival_area .elevator {
	margin-top: 80px;
}
body#conceptIndex main #infectionArea #room_area .container_65 {
	margin-top: 50px;
}
body#conceptIndex main #infectionArea #clublounge_are .container_68 {
	align-items: flex-start;
}

body#conceptIndex main #infectionArea #clublounge_are .container_68 .main_box {
	width: 71%;
}
body#conceptIndex main #infectionArea #clublounge_are .container_68 .sub_box {
	width: 27.1%;
	padding: 0;
}
body#conceptIndex main #infectionArea #oshokujidokoro_area .container_55 {
	margin: 40px 0;
}
body#conceptIndex main #infectionArea #staff_area h2 span {
	font-size: 70%;
	display: block;
	font-family: 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic',
		sans-serif;
	margin-top: 12px;
}
body#conceptIndex main #infectionArea #hours_area {
	margin-bottom: 90px;
}
body#conceptIndex main #infectionArea #hours_area h2 {
	background: none;
	padding-top: 0;
}
body#conceptIndex main #infectionArea #hours_area .inner_box {
	width: 750px;
	margin: 0 auto;
}
body#conceptIndex main #infectionArea #hours_area table {
	border-top: 1px dashed #544f49;
	margin-bottom: 30px;
}
body#conceptIndex main #infectionArea #hours_area table th {
	font-weight: normal;
	text-align: left;
	width: 44%;
}

body#conceptIndex main #infectionArea #hours_area table th,
body#conceptIndex main #infectionArea #hours_area table td {
	padding: 7px;
	border-bottom: 1px dashed #544f49;
}
body#conceptIndex main #infectionArea .small_text {
	font-size: 90%;
}
body#conceptIndex main #infectionArea .kome_text {
	font-size: 120%;
	margin-top: 60px;
}
body#conceptIndex main #infectionArea .totabijikan {
	position: relative;
	top: 30px;
	text-align: center;
}
body#conceptIndex main #infectionArea .totabijikan img {
	width: 90%;
	height: auto;
}

body#conceptIndex {
    .chokanko_60th{
        position: relative;
        max-width: 1080px;
        margin: 80px auto 0;
        @media (max-width:1200px) {
            padding-inline: 5%;
            margin-top: 60px;
        }
        @media (max-width:992px) {
            padding-inline: 0;
        }
        @media (max-width:768px) {
            margin-top: 8vw;
        }
        ._main{
            display: block;
            width: 100%;
            height: auto;
        }
        ._sub{
            margin-top: min(4vw,40px);
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 16px;
            @media (max-width:768px) {
                grid-template-columns: repeat(2,1fr);
                gap: 10px;
            }
            img{
                display: block;
                width: 100%;
                height: auto;
            }
        }
    }
}