@charset "UTF-8";
*{
	margin: 0px;
	padding: 0px;
}

/* --------------------------------------------- */
/* sp (全環境に共通のデザイン) */
/* --------------------------------------------- */
body{
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #1F2D43;
	background-color: #FFF5A8;
}

.wrap {
	overflow: hidden;
}

img{
	width: 100%;
}

ul {
	list-style-type: none;
	padding: 0;
}
a {
	text-decoration: none;
}
p {
	color: #00214D;
}
h4 {
	color: #00214D;
}
/*section-top*/
.section-top {
	position: relative;
}
.section-top .bg {
	position: absolute;
	width: 92%;
	height: 75%;
	background-color: #fff;
	border-radius: 100px;
	z-index: -1;
	top: 23%;
	left: 50%;
	transform: translateX(-50%)
}
.section-top .ttl-top {
	padding: 12% 0 3%;
	text-align: center;
}
.section-top .ttl-top .sub-ttl {
	width: 57%;
	margin-bottom: 2%;
}
.section-top .ttl-top .main-ttl {
	font-size: 28px;
	line-height: 1.7;
}
.section-top .ttl-top .main-ttl span{
	background-image: linear-gradient(transparent 50%, #FFBCBC 50%);
	padding-bottom: .25rem;
}
.section-top .ch-blue img{
	position: absolute;
	width: 27%;
    right: -4%;
    top: 43%;
}
.section-top .about {
	position: relative;
	background-color: #fff;
	border: solid 2px #00214D; /*外枠の線*/
	box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.2);
	padding: 0.1em 0.2em 0.1em 1.2em; /*内側の余白*/
	border-radius: 10px;
	margin: 0 14%;
}
/*ドットの設定*/
.section-top .about::before {
   content: "";
   position: absolute;
   border-right: dotted 8px #ddd; /*ドットの大きさ、高さ*/
   height:80%;
   top:0.5em; /*位置*/
   left:0.5em; /*位置*/
}
.section-top .about p {
	font-size: 12px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 400;
	margin: 0 auto;
	border-bottom: dashed 1px #ccc; /*罫線*/
	line-height: 1.5; /*行の高さ*/
	padding: 0.5em 0 0.5em 0.5em; /*文字の位置*/
}
.section-top .about p:last-of-type {
   border-bottom: none;
}
/*accordion*/
.list-contents {
	margin: 20% 0;
}

/* クリック領域 */
.section-contents .list-contents {
	margin: 10% 0;
}
.ac {
	margin: 15% 5%;
	border-radius: 15px;
	background-color: #fff;
	border: 2px solid #1B2D45;
	box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.2);
}
.ac-parent {
	position: relative;  /* 追加 */
	height: 25%;
	color: #00214D;
	line-height: 50px;
	cursor: pointer;
}
.ac-parent h3 {
	font-family: futura-pt-bold, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 23px;
	position: absolute;
	top: -34px;
	left: 10px;
}
.ac-parent h2 {
	font-size: 17px;
	margin-left: 10%;
}
.ac-parent h2 span{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 300;
	font-size: 12px;
	margin-left: 5px;
}
.ac-parent .face img{
	position: absolute;
	width: 28%;
	right: -40px;
	bottom: -38px;
}
/* ①プラスの横線 */
.ac-parent:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	width: 20px;
	height: 2px;
	background: #00214D;
	transform: translateY(-50%);
}

/* ②プラスの縦線 */
.ac-parent:after {
	content: "";
	position: absolute;
	top: 50%;
	/* 8px+12px-1px(幅2pxの半分) */
	left: 17px;
	width: 2px;
	height: 20px;
	background: #00214D;
	transform: translateY(-50%);
	transition: .3s;
}

/* ③オープン時にopenクラスを付与（縦線を回転させて非表示に） */
.ac-parent.open:after {
	top: 25%;
	opacity: 0;
	transform: rotate(90deg);
}

/* クリックしたら表示される領域 */
.ac-child {
	display: none;
	font-size: 12px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	padding: 1% 7%;
}
.ac-child h4 {
	font-weight: 600; 
}
.ac-child p {
	margin-top: 3px;
	margin-bottom: 10px;
	font-weight: 300;
}
.back img{
	width: 26%;
	margin: 0 37% 5%;
}
	/* 960px以上に適用されるCSS（PC用） */
@media screen and (min-width: 960px) {
	  img {
    max-width: 960px;
  }
}