@charset "utf-8";

/**
 *
 *  トップページ  共通
 *
 */

/*--------------------------------------------------------------------------
	overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/


/* html body #Page #Content
-----------------------------------------------------------------*/
	html {
		font-size:62.5%;
	}
	html,
	body,
	#Page,
	#Content,
	#Content > .inline{
		height: 100%;
	}
	* {
		margin:0;
		padding:0;
	}

/* @sp **************************************************/
@media all and (max-width: 1100px){
	html,
	body,
	#Page,
	#Content,
	#Content > .inline{
		height: auto;
	}
}


/* html, body
-----------------------------------------------------------------*/
	html.dev-pc{
		overflow: visible;
	}
	html.dev-pc body{
		overflow: hidden;
		overflow-x: auto;
	}
	html.browser-old-ie body,
	html.dev-pc._is_sp body{
		overflow: auto;
	}


/* #Page
-----------------------------------------------------------------*/
	#Page {
		-webkit-transition: padding .5s .01s cubic-bezier(0.19, 1, 0.22, 1);
				transition: padding .5s .01s cubic-bezier(0.19, 1, 0.22, 1);
	}


/* #Content
-----------------------------------------------------------------*/
	#Content {
		position: relative;
		z-index: 15000;
	}

/* @sp **************************************************/
@media all and (max-width: 1100px){
  #Content {
		padding-top: 0;
		z-index: 0;
  }
}

/* @tablet **************************************************/
	html.dev-tb #Content {
	  padding-top: 0;
	  z-index: 0;
	}


/*--------------------------------------------------------------------------
	.sec セクション共通
---------------------------------------------------------------------------*/

	.sec {
		overflow: hidden;
		position: relative;
		width: 100%;
/*		height: 100%;*/
	}


/* .sec_fit  セクション高さ100% 天地中央
-----------------------------------------------------------------*/
	.sec_fit {
		display: table;
		table-layout: fixed;
		width: 100%;
		height: 100%;
	}
	.sec_fit > .cont {
		display: table-cell;
		vertical-align: middle;
	}


/* section .cont,.title_sec,.content_sec
-----------------------------------------------------------------*/
	section .cont {
		position: relative;
		min-height: 50vh;
	}
	section .title_sec,
	section .content_sec {
		width: 100%;
		padding-top: 3%;
		padding-bottom: 3%;
	}
	section .content_sec {
		padding-top: 0;
	}


/* セクションタイトル
-----------------------------------------------------------------*/
	.title_sec {
	  text-align: center;
	}
	.title_sec .num {
		display: block;
		font-family: "Roboto Condensed","游ゴシック",YuGothic;
		font-size: 6rem;
		font-style: italic;
		font-weight: bold;
		line-height: 1.45em;
		color: #292C30;
		letter-spacing: 1.5px;
	}
	
	.title_sec .sub {
		position: relative;
		display: inline-block;
		margin: 0 auto 2%;
		padding-bottom: 2.5%;
		font-size: 3.6rem;
		font-weight: bold;
		line-height: 1.8;
		letter-spacing: 0.25rem;
		width: auto;
		max-width: 22em;
		color: #0088DC;
/*		color: #292C30;*/
	}
	
	.title_sec .sub > span.arrow {
		content: "";
		display: block;
		width: 9px;
		height: 10px;
		border-top: 3px solid #0088DC;
		border-right: 3px solid #0088DC;
		-webkit-transform: rotate(135deg);
				transform: rotate(135deg);
		position: absolute;
		left: 50%;
		margin-left: -6px;
		bottom: 0px;
	}
	.title_sec .sub::before,
	.title_sec .sub::after {
		content: "";
		display: block;
		position: absolute;
		width: 50%;
		bottom: 6px;
		border-bottom: 3px solid #0088DC;
	}
	.title_sec .sub::before {
		left: -7px;
	}
	.title_sec .sub::after {
		right: -7px;
	}
	.title_sec .sub > br {
		display:none;
	}
	.title_sec .lead {
		margin: 0 auto;
		width: 40em;
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 3.45rem;
		letter-spacing: 0.05em;
		color: #292C30;
	}


/* read more
-----------------------------------------------------------------*/
	.btn_more {
		margin: 30px auto;
		text-align: center;
	}
	.btn_more a {
		display: inline-block !important;
		width: 60%;
		max-width: 35em;
		padding: 0.85%;
		border: 2px solid #0088DC;
		border-radius: 5rem;
		text-decoration: underline;
/*		-webkit-filter: drop-shadow(1px 1px 2px rgba(150, 150, 150, 0.15));
			-ms-filter: drop-shadow(1px 1px 2px rgba(150, 150, 150, 0.15));
				filter: drop-shadow(1px 1px 2px rgba(150, 150, 150, 0.15));*/
	}
	/* IE11,Edge **************************************************/
	_:-ms-lang(x)::-ms-backdrop,
	.btn_more a {
/*		box-shadow: 1px 1px 4px rgba(150,150,150,0.45) !important;*/
	}
	
	.btn_more span.btn {
		font-size: 2rem;
		color: #5C5C5C;
	}
	.cont .btn_more a:link,
	.cont .btn_more a:visited {
		color: #5C5C5C;
	}
	.cont .btn_more a:hover {
		background: #FFE25E !important;
		text-decoration: none;
		-webkit-transition: background 0.2s ease-in-out;
			-moz-transition: background 0.2s ease-in-out;
				transition: background 0.2s ease-in-out;
	}





/* @pc wide **************************************************/
@media all and (min-width: 1626px) and (min-height: 754px){
}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.title_sec .num {
		font-size: 4.0rem;
	}
	.title_sec .sub {
		margin: 1% auto 2%;
		padding-bottom: 5%;
		font-size: 2.6rem;
		max-width: 90%;
	}
	.title_sec .sub > span {
	}
	.title_sec .sub > br {
		display: inline-block;
	}
	.title_sec .lead {
		margin: 1% auto 2%;
		font-size: 1.3rem;
		font-weight: normal;
		line-height: 2;
		width: 80%;
		letter-spacing: 0;
	}
	/* .btn_more */
	.btn_more a {
		width: 60%;
		padding: 2%;
	}
	.btn_more span.btn {
		color: #000;
		font-size: 1.2rem;
	}
}

/* @sp **************************************************/
@media all and (max-width: 612px){
	.title_sec .sub {
		max-width: 80%;
		font-size: 2.2rem;
	}
}
/* @sp **************************************************/
@media all and (max-width: 320px){
  .title_sec .sub {
		letter-spacing: 0.35rem;
  }
}






/* セクションコンテンツ .point_bg 背景デザイン
**************************************************/
	.content_sec span.point_bg,
	.content_sec span.point_bg::before,
	.content_sec span.point_bg::after {
		content: '';
		position: absolute;
		height: 6px;
		border-radius: 10px;
		margin: 0 -10% 0;
		-webkit-transform-origin: left center;
			-ms-transform-origin: left center;
				transform-origin: left center;
	}
	.content_sec span.point_bg {
		width: 27px;
	}
	.content_sec span.point_bg::before {
		width: 15px;
	}
	.content_sec span.point_bg::after {
		width: 15px;
	}
	.content_sec span.point_bg:nth-of-type(1) {
		top: 0.5em;
		left: 10.5em;
		background: #FFF;
		-webkit-transform: rotate(-135deg);
			-ms-transform: rotate(-135deg);
				transform: rotate(-135deg);
		z-index: 500;
	}
	.content_sec span.point_bg:nth-of-type(1)::before {
		top: 1em;
		left: 0em;
		background: #FFF;
		-webkit-transform: rotate(30deg);
			-ms-transform: rotate(30deg);
				transform: rotate(30deg);
		z-index: 500;
	}
	.content_sec span.point_bg:nth-of-type(1)::after {
		top: -1em;
		left: 0em;
		background: #FFF;
		-webkit-transform: rotate(-35deg);
			-ms-transform: rotate(-35deg);
				transform: rotate(-35deg);
		z-index: 500;
	}
	
	.content_sec span.point_bg:nth-of-type(2) {
		top: -0.5em;
		right: 7.5rem;
		background: #FFF;
		-webkit-transform: rotate(138deg);
			-ms-transform: rotate(138deg);
				transform: rotate(138deg);
		z-index: 500;
	}
	.content_sec span.point_bg:nth-of-type(2)::before {
		top: 1.6em;
		right: 0.2em;
		background: #FFF;
		-webkit-transform: rotate(-25deg);
			-ms-transform: rotate(-25deg);
				transform: rotate(-25deg);
		z-index: 500;
	}
	.content_sec span.point_bg:nth-of-type(2)::after {
		top: -1.6em;
		right: -0.3em;
		background: #FFF;
		-webkit-transform: rotate(40deg);
			-ms-transform: rotate(40deg);
				transform: rotate(40deg);
		z-index: 500;
	}


/* @pc wide 1 **************************************************/
@media all and  (min-width: 1627px) {
	.content_sec span.point_bg:nth-of-type(1) {
		left: 42%;
	}
	.content_sec span.point_bg:nth-of-type(2) {
		right: 33%;
	}
}
/* @pc wide 2 **************************************************/
@media all and (min-width: 1300px) and (max-width: 1626px) {
	.content_sec span.point_bg:nth-of-type(1) {
		left: 35%;
	}
	.content_sec span.point_bg:nth-of-type(2) {
		right: 22%;
	}
}
/* @pc wide 3 **************************************************/
@media all and (max-width: 1299px) {
	.content_sec span.point_bg:nth-of-type(1) {
		left: 28%;
	}
	.content_sec span.point_bg:nth-of-type(2) {
		right: 9%;
	}
}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.content_sec span.point_bg,
	.content_sec span.point_bg::before,
	.content_sec span.point_bg::after {
		height: 4px;
		margin: 0 -15% 0;
	}
	.content_sec span.point_bg {
		width: 14px;
	}
	.content_sec span.point_bg::before {
		width: 10px;
	}
	.content_sec span.point_bg::after {
		width: 10px;
	}
	.content_sec span.point_bg:nth-of-type(1) {
		top: 1.5em;
		left: 37%;
	}
	.content_sec span.point_bg:nth-of-type(2) {
		top: 1em;
		right: 30%;
	}
	.content_sec span.point_bg:nth-of-type(2)::before {
		top: 1.2em;
	}
}
/* @sp **************************************************/
@media all and (max-width: 400px){
	.content_sec span.point_bg:nth-of-type(1) {
		top: 1.5em;
		left: 32%;
	}
	.content_sec span.point_bg:nth-of-type(2) {
		top: 1em;
		right: 14%;
	}
}
/* セクションコンテンツ .point_bg 背景デザイン ここまで
**************************************************/



	section .cont .previews  {
		max-width: 1410px;
		margin: auto;
	}
	section .cont .previews dl {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-content: flex-start;
		align-items: flex-start;
		padding: 0 60px;
	}
	section .cont .previews dl::after {
		content:"";
		display: block;
		width: 410px;
	}
	section .cont .previews dl::before {
		content: "";
		display: block;
		width: 410px;
		order: 1;
	}
	section .cont .previews dl > div {
		background: #FFF;
		width: 40%;
		min-width: 350px;
		padding: 25px;
		-webkit-filter: drop-shadow(0px 7px 10px rgba(0, 64, 128, 0.15));
			-moz-filter: drop-shadow(0px 7px 10px rgba(0,64,128,0.15));
			-ms-filter: drop-shadow(0px 7px 10px rgba(0,64,128,0.15));
				filter: drop-shadow(0px 7px 10px rgba(0, 64, 128, 0.15));
	}
	section .cont .previews .cont_icons {
		width: 100%;
		max-width: 350px;
	}
	section .cont .previews div > span,
	section .cont .previews li > span {
		display: inline-block;
 		margin-bottom: 7px;
	}
	section .cont .previews dt {
		font-weight: 600;
		line-height: 1.5em;
		letter-spacing: 0.03rem;
		color: #0387D8;
	}
	section .cont .previews dd {
		font-weight: 300;
	}


	.c-button_anchor {
		display: flex !important;
		position: relative;
		margin-bottom: 3px;
		flex-wrap: wrap;
		transition: all 0.1s ease;
	}
	.c-button_anchor {
		top: 0 !important;
		box-shadow: 0 5px 0 0 #0088DC;
		margin-top: 5px !important;
		margin-bottom: 5px !important;
	}
	.c-button_anchor:hover {
		top: 4px !important;
		box-shadow: 0 0 0 0 #0088DC;
		margin-top: 5px !important;
		margin-bottom: 5px !important;
	}

@media screen and (min-width: 836px) {
}
@media screen and (min-width: 836px) {
    .c-button-md {
        width: clamp(210.8px, 18.155vw, 272.8px);
        height: clamp(47.6px, 4.1vw, 61.6px);
    }
}


/* @sp **************************************************/
@media all and (max-width: 1100px){
	section .cont .previews dl {
		padding: 0 20px;
 		flex-wrap: wrap !important;
	}
	section .cont .previews dl::after {
		width: calc(40% + 40px + 4px);
	}
	section .cont .previews dl > div {
		width: 100%;
		padding: 20px 20px 30px;
	}
	section .cont .previews .cont_icons {
		width: 100%;
		max-width: inherit;
	}

}
/* @sp **************************************************/
@media all and (max-width: 400px){
}