@charset "utf-8";


/* midashi
----------------------------------------------------------*/
.ttl_read {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: bold;
}
.rectangle {
	width:40px;
	height:56px;
	margin: 0 0 0 24px;
}
.c1 {
	background:#da89b9;
}
.c2 {
	background:#c495e1;
}
.c3 {
	background:#7fc8da;
}

.ttl_01 {
	margin: 28px 0 40px;
	padding: 0 0 24px;
	font-size: 60px;
	font-weight: bold;
	line-height: 20px;
	background:url(../images/bg_ttl_01.png) no-repeat 0 100%;
}
.ttl_01 span {
	display: inline-block;
	vertical-align: middle;
	font-size: 18px;
}
.ttl_01 .sub_txt {
	font-size: 15px;
	font-weight: normal;
}
.ttl_02 {
	margin: 0 0 28px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
}

/* base
----------------------------------------------------------*/
#wrapper {
	width:100%;
	margin:0 auto;
	background:#fff;
}

/* content
----------------------------------------------------------*/
#content {
	width:1200px;
	padding:0 10px;
	margin:0 auto;
	background:#fff;
}
.gray_wrap {
	background: linear-gradient(-135deg, #fff, #e6e6e6);
}
.read_inner {
	width:992px;
	margin:0 auto;
	background: url(../images/bg_read_01.png) no-repeat 0 10%;
}
.read_inner2 {
	width:992px;
	margin:0 auto;
	background: url(../images/bg_read_02.png) no-repeat 100% 90%;
}
.read_inner3 {
	width:742px;
	padding:140px 10px 100px;
	margin:0 auto;
}
.content_box {
	margin: 60px auto;
}
.inner {
	width:992px;
	margin:0 auto;
}
.box {
	margin: 0 0 60px;
	text-align: center;
}
.box .ttl_name {
	font-size: 15px;
}
.box_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box .ttl_name {
	margin: 12px 0 0;
}
.box a:hover {
	transition: 1.0s ;
	opacity: 0.8;
}
.people_wrap {
	width:1200px;
	margin:0 auto 48px;
	padding: 52px 48px 68px 48px;
}
.people_01 {
	background: linear-gradient(-135deg, #fff, #badbe4);
}
.people_02 {
	background: linear-gradient(-135deg, #fff, #f5c1d8);
}
.people_03 {
	background: linear-gradient(-135deg, #fff, #eebdbb);
}
.people_04 {
	background: linear-gradient(-135deg, #fff, #b3e6d9);
}
.people_box {
	display: flex;
	margin: 0 0 40px;
}
.people_box .info_box {
	width: 708px;
}
.people_box .ttl_name {
	margin: 12px 0 0;
	padding: 0 0 20px 40px;
	font-size: 20px;
	font-weight: bold;
}
.people_box .name1 {
	border-bottom: 2px solid #66c3d1;
}
.people_box .name2 {
	border-bottom: 2px solid #e883ad;
}
.people_box .name3 {
	border-bottom: 2px solid #e89183;
}
.people_box .name4 {
	border-bottom: 2px solid #72c4b2;
}
.people_box p {
	padding: 20px 32px 0 40px;
	font-size: 14px;
	line-height: 1.8;
}

.provide_wrap {
	width:1200px;
	margin:0 auto 48px;
	padding: 0;
	background: #e9e9e9;
}
.provide_box {
	width: 990px;
	height: 655px;
	margin: 0 auto;
	background: url(../images/bg_provide.png) no-repeat 100% 100%;
	background-size: cover;
}
.provide_box .info_box {
	width: 390px;
	padding: 212px 0 20px 48px;
}
.provide_box .info_box p {
	font-size: 14px;
}


/* modal
----------------------------------------------------------*/
.modal-overlay {
    z-index:2; /*デモではheader,footerをz-index:1にしたので それより上げています*/
    display:none; /*jsでフェードインされるまでdisplay:none*/
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh; /*100vhでビューポートの高さいっぱいになります*/
    background-color:rgba(0,0,0,.5)} /*これは好きな色・透明度で*/
a.modal-open:hover {cursor:pointer} /*カーソルをポインタに*/
.modal-content {
    position:fixed;
    display:none; /*jsでフェードインされるまでdisplay:none*/
    z-index:3; /*オーバーレイより上に*/
    margin:10px;
    padding:40px 60px;
    background:#fff}
.modal-content img {width:auto;max-height:75vh}
.modal-content h1 {font-size:28px; font-weight: bold; margin-bottom:28px; padding-bottom: 28px; text-align: center; border-bottom: 1px solid #d6d6d6;}
.modal-content p {max-width:565px; text-align:left}
a.modal-close { /*クローズボタンは何でも好きなスタイルでOK*/
    position:absolute;
    top:0;
    right:10px;
    color:#898989;
    font-size:35px;
    line-height:1;
    font-weight:bold;
    text-decoration:none}
a.modal-close:hover {cursor:pointer} /*カーソルをポインタに*/