/* GROUPTOUR TOP CSS */

/******************************************************************************* TITLE */
#title{
	background:url(../img/title_bg.jpg) no-repeat center center #D8E9E9;
	background-size:auto 100%;
	min-height:570px;
	padding:1px 0;
	overflow:hidden;
}
.title_inner{
	position:relative;
	width:80%;
	margin:8% auto;
	padding:4% 5% 8%;
	background-color:rgba(255,255,255,0.95);
}
#title h1{
	font-size:2.4em;
	line-height:1.2;
	text-align:center;
	padding:0 0 10px 0;
	margin:0;
	border-bottom:5px solid #7EBABB;
}
#title h1 + p strong{font-size:1.4em; text-align:center; display:block;}
#title h1 + p strong br{ display:none;}
#title p {
	text-align:center;
	font-size:1.2em;
	margin:1.4em 0;
}
.title_inner:after{
	content:"";
	display:block;
	position:absolute;
	left:-10%;
	bottom:-4%;
	width:20%;
	height:41%;
	background:url(../img/meitora01.png) no-repeat top left;
	background-size:100% auto;
}

/******************************************************************************* COMMON */
.container h2{
	text-align:center;
	font-size:2.6em;
	line-height:1.2;
	margin:0 auto 40px;
	padding:0 0 10px;
	border-bottom:2px solid #7EBABB;
	display:inline-block;
	font-family: 'Roboto Condensed', sans-serif;
}
/******************************************************************************* preventive */
#preventive{
	background-color: #e1f4fc;
	padding:3em 0 3em;
}
.moviebox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start
}
.moviebox dt{
	flex-basis: 50%;
	max-width: 50%;
}
.moviebox dd{
	flex-basis: 46%;
	max-width: 46%;
	background-color: #FFF;
	padding: 1em 1.5em;
	border-radius: 10px;
	align-self: flex-start;
	font-size: 0.95em;
}
.moviebox dt video{
	width: 100%;
	
}
.moviebox dd h4{
	color: #0072c9;
	margin-bottom: 0.5em;
	font-size: 1.3em;
}
.moviebox dd p + p{
	margin-top: 1em;
}


/******************************************************************************* CASE_STUDY */
#case_study{
	padding:5em 0 7em;
	margin:0;
	text-align:center;
	background-color:#E3EFEF;
}
.cs_box{
	position:relative;
	min-height:290px;
	overflow:hidden;
	margin-bottom:50px;
}
.cs_box_photo{
	position:relative;
	width:65%;
}
/*ODD*/
.cs_box:nth-of-type(odd){
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-direction:normal;
    -moz-box-direction:normal;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-flex-direction:row;
    -moz-flex-direction:row;
    flex-direction:row;
}
.cs_box:nth-of-type(odd) .cs_box_photo img{
	width:100%;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translateY(-50%) translateX(0);
	-webkit-transform: translateY(-50%) translateX(0);
}	
.cs_box:nth-of-type(odd) > dl{
	position:relative;
	width:53%;
	margin:0 0 0 -15%;
	padding:5% 0 0 7%;
	text-align:left;
	background: -moz-linear-gradient(70deg, rgba(227,239,239,0) 0%, rgba(227,239,239,0) 20%, rgba(227,239,239,1) 20.1%);
	background: -webkit-linear-gradient(70deg, rgba(227,239,239,0) 0%,rgba(227,239,239,0) 20%,rgba(227,239,239,1) 20.1%);
	background: linear-gradient(70deg, rgba(227,239,239,0) 0%,rgba(227,239,239,0) 20%,rgba(227,239,239,1) 20.1%);
}

/*EVEN*/
.cs_box:nth-of-type(even){
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-direction:reverse;
    -moz-box-direction:reverse;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-flex-direction:row-reverse;
    -moz-flex-direction:row-reverse;
    flex-direction:row-reverse;
}
.cs_box:nth-of-type(even) .cs_box_photo{
	margin-left:-15%;
}
.cs_box:nth-of-type(even) .cs_box_photo img{
	width:100%;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%) translateX(-100%);
	-webkit-transform: translateY(-50%) translateX(-100%);
}
.cs_box:nth-of-type(even) > dl{
	position:relative;
	width:53%;
	margin:0 0 0;
	padding:5% 7% 0 0;
	text-align:left;
	background: -moz-linear-gradient(110deg, rgba(227,239,239,1) 0%, rgba(227,239,239,1) 81%, rgba(227,239,239,0) 81.1%);
	background: -webkit-linear-gradient(110deg, rgba(227,239,239,1) 0%,rgba(227,239,239,1) 81%,rgba(227,239,239,0) 81.1%);
	background: linear-gradient(110deg, rgba(227,239,239,1) 0%,rgba(227,239,239,1) 81%,rgba(227,239,239,0) 81.1%);
}

.cs_box  dl dd{
	background:#FFF;
	padding:5%;

}
p.case_no{
	display:inline-block;
	vertical-align:middle;
	width:24%;
	font-size:5rem;
	color:#7EBABB;
	line-height:1;
	font-family: 'Roboto Condensed', sans-serif;
}
.case_no:before{
	content:"CASE";
	display:block;
	font-size:1rem;
	margin:0 0 -0.5em 0.3em;
}
.cs_box h3{
	display:inline-block;
	vertical-align:middle;
	width:76%;
	font-size:1.4rem;
	line-height:1.2;
}
.cs_box h3 br {display:none;}
.case_link {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2;
}
.case_link a{
	display:block;
	width:100%;
	height:100%;
	padding:13% 0 0;
	font-size:2rem;
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
}
.case_link a:hover{
	background-color:rgba(79,160,160,0.4);
    text-indent: 0;
    white-space: nowrap;
    overflow: hidden;
	text-align:center;
	color:#FFF;
}
.case_button{
	width:80%;
	margin:2em auto 0;
	font-size:1.2em;	
}
.case_button a{
	display:block;
	width:100%;
	height:100%;
	padding:11px 0 15px;
	background-color:#4FA1A2;
	color:#FFF;
	border-top:4px solid #4FA1A2;
	border-bottom:4px solid #1C8687;

}
.case_button a:hover{
	padding:15px 0 11px;
	background-color:#7EBABB;
	border-top:4px solid #4FA1A2;
	border-bottom:4px solid #7EBABB;
}

/******************************************************************************* POINT */
#point{
	padding:5em 0 7em;
	text-align:center;
	background:#FFFBD9;
}
.point_inner{
    display:flex;
    flex-wrap:wrap;	
}
.point_photo{
	position:relative;
	width:31%;
	text-align:right;
}
.point_photo img {width:100%;}


.point_photo img:nth-child(2){
	position:absolute;
	width:116%;
	right:-20px;
	bottom:0;
}
.point_white_box{
	width:69%;
	background:#FFF;
	text-align:left;
	padding:0 4% 4% 4%;
}
.point_icon{
	background:#DC6070;
	color:#FFF;
	font-size:1.2em;
	display:inline-block;
	padding:3px 1em;
	font-weight:bold;
	margin-bottom:20px;
}
.point_white_box h3 {
	font-size:2em;
	padding:0.5em 0;
	line-height:1.2;
}
.point_white_box h3 br{display:none;}
.point_dl dt{
	color:#DC6070;
	font-weight:bold;
	font-size:1.2em;
	margin-bottom:5px;
}
.point_dl dd {
	margin-bottom:2em;
}

.point_button{
	width:80%;
	margin:2em auto 1em;
	text-align:center;
}
.point_button a{
	display:block;
	width:100%;
	height:100%;
	padding:5px 0 10px;
	background-color:#4FA1A2;
	color:#FFF;
	border-top:4px solid #4FA1A2;
	border-bottom:4px solid #1C8687;
}
.point_button a:hover{
	padding:10px 0 5px;
	background-color:#7EBABB;
	border-top:4px solid #4FA1A2;
	border-bottom:4px solid #7EBABB;

}
/******************************************************************************* NEEDS */
#needs{
	padding:5em 0 7em;
	margin:0;
	text-align:center;
}
.needs_wrap{
	padding-top:20px;
    display:flex;
    flex-wrap:wrap;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
.needs_wrap > dl{
	position:relative;
	width:30%;
	margin:0 5% 5% 0;
	padding:25px 3% 3%;
    box-sizing: border-box;
	border:2px solid #CCC;
}
.needs_wrap > dl:nth-of-type(odd){border:2px solid #008F88;}
.needs_wrap > dl:nth-of-type(even){border:2px solid #F8C300;}
.needs_wrap > dl:nth-of-type(3n){margin-right:0;}
.needs_wrap > dl:nth-of-type(odd):hover{ background:#D4F3EC;}
.needs_wrap > dl:nth-of-type(even):hover{ background:#FFFED2;}

.needs_wrap > dl dt{
	display:table;
	width:100%;
	height:5em;
}
.needs_wrap > dl dt h3{
	display:table-cell;
	vertical-align:middle;
	font-size:1.4em;
	line-height:1.2;
	border-bottom:2px solid #999;
	padding:5px 0;
}
.needs_wrap > dl dd{
	padding:15px 0 0 0;
	text-align:left;
	font-size:0.95em;
}
.needs_wrap > dl:before{
	content:"";
	display:block;
	width:40%;
	height:4em;
	position:absolute;
	left:30%;
	top:-2em;
	background-repeat:no-repeat;
	background-size: auto 100%;
	background-position:center center;
}
.needs_wrap > dl.activation:before{ background-image:url(../img/icon_activation.png);}
.needs_wrap > dl.overseas:before{ background-image:url(../img/icon_overseas.png);}
.needs_wrap > dl.event:before{ background-image:url(../img/icon_event.png);}
.needs_wrap > dl.public_relations:before{ background-image:url(../img/icon_pr.png);}
.needs_wrap > dl.transport:before{ background-image:url(../img/icon_airplane.png);}
.needs_wrap > dl.information:before{ background-image:url(../img/icon_information.png);}

.needs_wrap > dl dd p:last-child{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.needs_wrap > dl dd p:last-child a{
	display:block;
	width:100%;
	height:100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}










/*--------------------------------------------------- ------
					950px対応
-----------------------------------------------------------*/
@media only screen and (max-width: 950px) {
/******************************************************************************* TITLE */
#title{min-height:0;}

/******************************************************************************* POINT */
#point{padding:5em 5% 7em;}
/******************************************************************************* CASE_STUDY */
.cs_box:nth-of-type(odd) .cs_box_photo img,
.cs_box:nth-of-type(even) .cs_box_photo img{
	width: auto;
	height:100%;
}
/*ODD*/
.cs_box:nth-of-type(odd) > dl{
	width:52%;
	padding:5% 3% 0 5%;
}

/*EVEN*/
.cs_box:nth-of-type(even) > dl{
	width:52%;
	padding:5% 5% 0 3%;
}
/******************************************************************************* NEEDS */
#needs {padding:5em 5% 7em;}
.needs_wrap > dl{
	width:31.3%;
	margin-right:3%;
}

}

/*--------------------------------------------
	768px以下（タブレット調整）
---------------------------------------------*/
@media screen and (max-width: 768px)  {
/******************************************************************************* TITLE */
.title_inner{width:90%;}
.title_inner:after{ width:20%;}
#title p {text-align:left; padding:0 1%;}	
#title p br{display:none;}

.title_inner:after{
	left:40%;
	bottom:auto;
	top:88%;
	width:20%;
}
#title h1 + p strong br{ display: block;}
/******************************************************************************* preventive */
.moviebox{
padding: 5%;
}
.moviebox dt{
	flex-basis: 100%;
	max-width: 100%;
	margin-bottom: 1em;
}
.moviebox dd{
	flex-basis: 100%;
	max-width: 100%;
}


/******************************************************************************* CASE_STUDY */
#case_study{padding:3em 0 3em;}
.cs_box{min-height:230px;}
.cs_box dl dd p {font-size:0.9em; line-height:1.5;}
p.case_no{font-size:3rem;width: 18%; margin-bottom:10px;}
.case_study_wrap h3{font-size:1.2rem;}


/******************************************************************************* POINT */
#point{padding:3em 5% 3em;}
.point_photo{width:100%;}
.point_white_box{width:100%; padding:4%;}
.point_photo img:nth-child(2){ display:none;}
/******************************************************************************* NEEDS */
#needs {padding:3em 5% 2em;}
.needs_wrap{padding:20px 0 0 0;}
.needs_wrap > dl{
	width:47.5%;
	margin-right:5%;
	margin-bottom:30px;
    padding: 25px 5% 5%;
}
.needs_wrap > dl:nth-of-type(3n){ margin-right:5%;}
.needs_wrap > dl:nth-of-type(2n){ margin-right:0;}


}

/*--------------------------------------------
	640x以下（微調整）
---------------------------------------------*/
@media screen and (max-width: 640px)  {

/******************************************************************************* CASE_STUDY */
.case_study_wrap {
    padding: 0 3%;
}
/*ODD EVEN*/
.cs_box:nth-of-type(odd),
.cs_box:nth-of-type(even){
    flex-direction:unset;
	background:#FFF;
	min-height:0;
}
.cs_box:nth-of-type(odd) .cs_box_photo img,
.cs_box:nth-of-type(even) .cs_box_photo img{
	width:100%;
	height:auto;
	top:0;
	left:0;
	position: relative;
	transform: translateY(0) translateX(0);
}
.cs_box:nth-of-type(odd) > dl,
.cs_box:nth-of-type(even) > dl{
	width:95%;
	background:#FFF;
	margin:2% 2.5%;
	padding:0;
}
.cs_box:nth-of-type(even) .cs_box_photo {margin-left: 0;}
.case_study_wrap h3 {width: 84%;}
.case_link a {padding: 35% 0 0; }
.case_no:before {
    font-size: 0.2vw;
	margin-bottom:-0.3em;
}
p.case_no {
	width:16%;
    font-size: 5.5vw;
    vertical-align: top;
    vertical-align: middle;
	margin-bottom:0;
}
.cs_box > dl dt {
    padding-bottom: 5px;
}
.cs_box > dl dd {
    padding: 2%;
    border-top: 1px solid #7EBABB;
}



/******************************************************************************* NEEDS */

.needs_wrap > dl:nth-of-type(odd){ background:#D4F3EC;}
.needs_wrap > dl:nth-of-type(even){ background:#FFFED2;}
.needs_wrap > dl dt h3{font-size:1.2em;}
}



/*--------------------------------------------
	480x以下（スマートフォン）
---------------------------------------------*/
@media screen and (max-width: 480px)  {
/******************************************************************************* TITLE */
#title h1{font-size:2em;}
#title p {font-size:1em;}
.title_inner:after{top:90%; width:26%; left:37%;}

/******************************************************************************* COMMON */
.container h2{ margin-bottom:20px;}
/******************************************************************************* CASE_STUDY */


.cs_box:nth-of-type(1),
.cs_box:nth-of-type(2),
.cs_box:nth-of-type(3){
   display: block !important;
}
.cs_box:nth-of-type(odd) > dl,
.cs_box:nth-of-type(even) > dl{
    float: none;
    width: 100%;
    padding: 0;
	margin:0;
}

.cs_box_photo{width:44%; float:left; z-index:1;}
.cs_box{ margin-bottom:20px;}

p.case_no { display:block; width:100%; padding:0;}
.cs_box h3 { display:inline; font-size:1.1em;  width:100%;}

.cs_box > dl { float:none; width: 100%; padding:0;}
.cs_box > dl > dt{ float:right; width:56%; padding:2% 3%; box-sizing: border-box;}
.cs_box > dl > dd{display:block; clear:both; padding:3% 4% 4%; margin:0;}
.case_no:before {margin: 0 3px 0 0; display:inline; vertical-align:middle; font-size:0.5em;}
.case_link a {padding: 80px 0 0;}


/******************************************************************************* POINT */
.point_white_box h3 {font-size: 1.6em;}


/******************************************************************************* NEEDS */
.needs_wrap > dl {padding: 20px 3% 3%;}
.needs_wrap > dl dt{height:4em;}
.needs_wrap > dl dd { padding: 8px 0 0 0; line-height:1.4;}
.needs_wrap > dl:before {background-size:100% auto;}



}