@charset "utf-8";
#wrapAll {
	background: #fff;
  padding-top: 100px ;
  width: 95% ;
  margin: 0 auto ;
}
.block_msg {margin: auto;}
*, *:before, *:after {
	box-sizing: border-box;
}
/***********************************************/
/* base layout - wrap						  */
/***********************************************/
input[type=submit],
input[type=button],
button {cursor: pointer;}
#wrapAll {position: relative;}
#main #wrapAll > .section,
#main > .section,
#main > .article {margin: auto;}
#footer {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

@media screen and (min-width:1141px) {
	#main #wrapAll > .section,
	#main > .section,
	#main .article {width: 1140px;}
}

@media screen and (min-width:641px) {
	.sp {display: none;}
	.boxL {float: left;}
	.boxR {float: right;}
}

@media screen and (max-width:640px) {
   .pc {display: none;}
}


/***********************************************/
/* common style */
/***********************************************/



/********* share style - p -****************/
.center {text-align: center;}
.kome {
	text-indent: -1em;
	padding-left: 1em;
}
#main p em {font-style: normal;}

.mb05 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mt05 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}

.red {color: #f00;}

/*#main .wrap_point .txt2,
#main .section .txt, 
#main .article p, 
#main .one_photo p{
	font-size: 1.6em;
	font-size: 1.6rem;
}*/

.block_msg h2 {
	color: #ea619f;
	font-weight: bold;
}
.voice h2 {
	color: #ec6867;
	font-weight: bold;
}
.voice.vol4 h2 {color: #76368f;}

#main .section .txt, 
#main .sec p {text-indent: 1em;}
#main .sec p.txt_onph {text-indent: 0;}
#main .voice p.txt {
	line-height: 1.53;
}

/* one photo */
.one_photo {
	margin: 0 auto 40px;
	border-radius: 10px;
	position: relative ;
}
.one_photo.vol4 {
	box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 12px #f9e7e7;
	background: url("../../voice/images/box_back_vol4.png") 0 0 repeat;
}
.one_photo h1 {
  position: absolute ;
}
.one_photo.vol4 h1 {
  top: min(4.4vw, 33px);
	left: max(-23px, -4.59375vw);
}
.one_photo.vol4 h1 .img_onph {
	width: min(70vw, 526px);
	height: auto;
}

.one_photo .ttl_ico {position: absolute ;} 
.one_photo.vol4 .ttl_ico {
	width: min(calc(26.8vw * 1.15), 201px);
	top: -20px;
	left: min(55vw, 447px);
}
.one_photo .ttl {text-align: center;}
.one_photo.vol4 h2 {
	color: #000 ;
	font-weight: bold;
	line-height: 1.3;
}

.txt_onph.top {padding-top: 2%;  font-weight: bold ;}
#main .vol4 .txt_onph.top {
	color: #134895;
	line-height: 1.3;
	margin-bottom: 5px;
}
.one_photo.vol4 figcaption {
	text-align: left;
}
.one_photo.vol4 figure img {
	box-shadow: 0px 0px 8px 0px  rgba(0,0,0,0.2);
}

.voice.vol4 figcaption {
	text-align: right;
	margin-top: 5px;
}

/* point */
.vol4 .point_ul {
	background-color: #fcf2f2;
	border: 2px solid #f7cece;
	border-radius: 10px;
}
.vol4 .point_ul .point_li {
	padding: 1em 1em .8em 3em;
	border-bottom: 2px solid #f7cece;
	position: relative;
}
.vol4 .point_ul .point_li:last-child {
	border-bottom: none;
}
.vol4 .point_ul .point_li::before {
	content: '';
	display: block;
	width: .9em;
	height: .9em;
	border-radius: 50%;
	background-color: #76368f;
	position: absolute;
}

.vol4 .fig_center {
	max-width: 950px;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.vol4 .fig_center figcaption {
	width: 100%;
	text-align: right;
}

/*btn*/
.flex_btn_c {
	display: flex;
	justify-content: center;
}
.btn_voice {
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	width: 340px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	background-color: #02b4d5;
	box-shadow: 0px 4px 0 0 #005e70;
	position: relative;
}
#main .btn_voice:hover {
	opacity: .7;
	/*transform: translateY(4px);
	box-shadow: none;*/
}
.btn_voice::before {
	content: '';
	display: block;
	background-color: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 1;
	top: calc(50% - 10px);
	right: 14px;
}
.btn_voice::after {
	content: '';
	display: block;
	width: 8px;
	height: 10px;
	background-color: #02b4d5;
	clip-path: polygon(0 0, 30% 0, 85% 50%, 30% 100%, 0 100%, 60% 50%);
	position: absolute;
	z-index: 2;
	top: calc(50% - 5px);
	right: 19px;
}

@media screen and (min-width:641px) {
	#main > .ttl h1 {margin-bottom: 70px;}
	.txtL .sec,
	.txtR figure {float: left;}
	.txtR .sec,
	.txtL figure {float: right;}

	#main #wrapAll > .section.voice {
		margin-top: 64px;
		margin-bottom: 64px;
	}
	#main #wrapAll > .section.wp_btn {margin-bottom: 152px;}

	.one_photo {
		width: 98%;
		max-width: 1250px;
	}
	.one_photo .sec {width: 58%;}
	#main .one_photo.vol4 {padding: 70px 0px 30px 30px;}
	.one_photo.vol4 h1 {
	  top: 10px ;
		left: -21px;
	}
	.one_photo.vol4 h1 .img_onph {
		width: 376px;
	}
	.one_photo.vol4 .ttl_ico {
		width: 168px;
		left: 326px;
		top: -25px;
	}

	.one_photo.vol4 h2 {
		font-size: 2.4rem;
	}
	#main .vol4 .txt_onph.top {
		font-size: 2rem;
	}
	#main .vol4 .txt_onph.read {
		font-size: 1.6rem;
	}
	.one_photo .ttl {margin-bottom: 40px;}
  .one_photo figure {
	   position: absolute ;
	}
  .one_photo.vol4 figure {
	  width: min(36%, 320px) ;
	  top: 72px ;
		left: 62%;
	}
	.one_photo.vol4 figure .img_onph {
		display: block;
		margin: 0 auto 5px;
	}
	.one_photo.vol4 figcaption {
		/*font-size: 1.3rem;*/
		font-size: 1.6rem;
	}
	.one_photo.vol4 figcaption .bf {
		font-size: 1.8rem;
	}

	#main .voice h2 {
		font-size: 2rem;
		margin-bottom: 10px;
	}
	#main .voice p.txt {
		font-size: 1.4rem;
	}
	#main .voice p.txt + p.txt {
		margin-top: 1em;
	}
	.block_flex {
		display: flex;
		justify-content: space-between;
	}
	.vol4 .block_flex .wrap {
		width: min(54%, 616px);
		margin-right: 1.5em;
	}
	.vol4 .block_flex figure {
		width: min(43%, 500px);
	}
	.voice.vol4 figcaption {font-size: 1.3rem;}

	.vol4 .point_ul {
		width: min(90%, 1020px);
		margin: 1.5em auto;
	}
	.vol4 .point_ul .point_li {
		font-size: 1.6rem;
	}
	.vol4 .point_ul .point_li::before {
		left: 1.8em;
		top: 1.5em;
	}
}
@media screen and (min-width:641px) and (max-width:800px) {
}
@media screen and (min-width:768px) {
	.one_photo.vol4 h2 {
		font-size: 2.8rem;
	}
	#main .vol4 .txt_onph.top {
		font-size: 2rem;
		line-height: 1.5;
	}
	#main .vol4 .txt_onph.read {
		font-size: 1.7rem;
	}
	.one_photo.vol4 figcaption {
		font-size: 1.7rem;
	}
	.one_photo.vol4 figcaption .bf {
		font-size: 1.9rem;
	}
	.one_photo.vol4  h2 .pc {display: none;}
	#main .voice h2 {
		font-size: 2.2rem;
		margin-bottom: 10px;
	}
	#main .voice p.txt {
		font-size: 1.55rem;
	}
	.vol4 .point_ul .point_li {
		font-size: 1.7rem;
	}
	.voice.vol4 figcaption {font-size: 1.45rem;}
}
@media screen and (min-width:980px) {
	.one_photo.vol4  h2 {
		font-size: 3rem;
	}
	#main .vol4 .txt_onph.top {
		font-size: 2.4rem;
	}
	#main .vol4 .txt_onph.read {
		font-size: 1.9rem;
	}
	.one_photo.vol4 figcaption {
		font-size: 1.9rem;
	}
	.one_photo.vol4 figcaption .bf {
		font-size: 2rem;
	}
	.one_photo .sec {width: 64.8%;}
	.one_photo.vol4 figure {
		width: min(26.8vw, 320px);
		left: min(68%, 866px);
	}
	br.pad {display: none;}
	#main .voice h2 {
		font-size: 2.4rem;
		margin-bottom: 10px;
	}
	#main .voice p.txt {
		font-size: 1.7rem;
	}
	.vol4 .point_ul .point_li {
		font-size: 1.9rem;
	}
	.vol4 .point_ul .point_li::before {
		top: 1.3em;
	}
	.voice.vol4 figcaption {font-size: 1.55rem;}
}
@media screen and (min-width:1021px) {
  .one_photo .txt_onph {line-height: 1.8;}
	#main .one_photo.vol4 {padding: 90px 70px 20px 40px;}
}
@media screen and (min-width:1200px) {
	.one_photo.vol4  h2 {
		font-size: 3.5rem;
	}
	.one_photo .sec {width: 68%;}
	.one_photo.vol4 figure {
		left: min(69%, 866px);
	}
}
@media screen and (min-width:1240px) {
	.one_photo.vol4  h2 .pc {display: inline-block;}
}
@media screen and (max-width:1020px) {
	#main #wrapAll > .section,
	#main > .section,
	#main .article {
		width: 100%;
		padding: 0 10px;
	}
}

@media screen and (max-width:640px) {
	br.pad {display: none;}
	#main .voice h2,
	#main .block_msg h2 {
		font-size: 2.2rem;
		margin-bottom: 10px;
	}
	#main .article p {
		font-size: 1.4rem;
		margin-bottom: 1.6em;
	}
	#main figure {text-align: center;}
	
	#main #wrapAll .section {margin-bottom: 40px;}
	#main #wrapAll > .section.wp_btn {margin-bottom: 80px;}
	.one_photo {width: 91%;}
	
/* vol4 */
	.one_photo.vol4 {
		padding: min(16.8vw, 120px) min(5.6vw, 42px) 20px;
		margin-bottom: 60px;
	}
	.one_photo.vol4  h2 {
		font-size: clamp(2.2rem, 5.73vw, 4.4rem);
	}
	#main .vol4 .txt_onph.top {
		font-size: clamp(1.7rem, 4.428vw, 3.4rem);
	}
	#main .vol4 .txt_onph.read {
		font-size: clamp(1.4rem, 3.646vw, 2.8rem);
	}
	.one_photo.vol4 figure {
		margin: 25px auto 0;
	}
	.one_photo.vol4 figure .img_onph {
		margin-bottom: 10px;
	}
	.one_photo.vol4 figcaption {
		/*font-size: clamp(1.2rem, 3.126vw, 2.4rem);*/
		font-size: clamp(1.4rem, 3.646vw, 2.8rem);
		line-height: 1.4;
	}
	.one_photo.vol4 figcaption .bf {
		font-size: clamp(1.5rem, 3.908vw, 3rem);
	}

	/*other*/
	#main .voice h2 {
		font-size: clamp(1.7rem, 4.428vw, 3.4rem);
	}
	#main .voice p.txt {
		font-size: clamp(1.35rem, 3.52vw, 2.7rem);
		margin-bottom: 1em;
	}
	.voice.vol4 figcaption {
		/*font-size: clamp(1.1rem, 2.865vw, 2.2rem);*/
		font-size: clamp(1.25rem, 3.256vw, 2.5rem);
	}
	.vol4 .point_ul {margin-bottom: 2em;}
	.vol4 .point_ul .point_li {
		font-size: clamp(1.45rem, 3.778vw, 2.9rem);
		padding-left: 2.2em;
	}
	.vol4 .point_ul .point_li::before {
		left: 1.2em;
		top: 1.35em;
	}

	/*btn*/
	.btn_voice {
		font-size: clamp(1.5rem, 3.908vw, 3rem);
		width: 100%;
		height: min(14.8vw, 110px);
	}
	.btn_voice::before {
		width: min(4.8vw, 36px);
		height: min(4.8vw, 36px);
		top: calc(50% - (min(4.8vw, 36px) / 2));
		right: min(4vw, 30px);
	}
	.btn_voice::after {
		width: min(2vw, 15px);
		height: min(2.4vw, 18px);
		top: calc(50% - (min(2.4vw, 18px) / 2));
		right: min(5.2vw, 39px);
	}
}
@media screen and (max-width:480px) {
	#main > .ttl h1 img{width: 68vw;}
	#main .block_msg h2 {font-size: 5.2vw;}
	.one_photo .ttl h2 span::before {display: none;}
}
@media screen and (max-width:380px) {
	.one_photo.vol4  h2 {
		font-size: clamp(2rem, 5.21vw, 4rem);
	}
}
@media screen and (max-width:360px) {
	#main .block_msg h2 {font-size: 4.9vw;}
	#main .one_photo .caption {font-size: 3.6vw;}
	.voice figcaption {font-size: 3.6vw;}
	.voice figcaption i {font-size: 3.2vw;}
}

.btn a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}
.btn{
	text-align: center ;
	margin: 0 auto ;
}
.video {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

.btn_show_prd {
	font-size: 1.8rem;
	margin: 10px 0;
}
.btn_show_prd a {
	color: #fff;
	text-align: center;
	display: block;
	padding: 8px 0;
	border-radius: 9px;
	background-color: #ec6867;
	box-shadow: 0 5px 0 #e8374a;
	position: relative;
}
.btn_show_prd .circle-white {right: 15px;}
.icn-arrow-red {width:18px;height:18px;border-radius:100%;padding:4px 4px;position:absolute;right:2%;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.icn-arrow-red::before {content:"";width:8px;height:8px;border-top:2px solid #ea63a0;border-left:2px solid #ea63a0;display:block;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}

/* clearfix */
.clearfix {width:100%;}
.clearfix::after {
	content: ""; 
	display: block; 
	clear: both;
	width: 100%;
}

*::after {
  display:block;
  clear:both;
} /* この記述は固定です */

element {width:100%;} /* clearfix IE6, 7 */
element::after {content:"";} /* clearfix */

#glnavi {width:100%;} /* clearfix IE6, 7 */
#glnavi::after {content:"";} /* clearfix */

#main::after,
#article::after,
#wrapAll::after,
#main .title::after,
.form dl::after,
.section::after,
.sec::after,
.block::after,
.wrap::after {content:"";} /* clearfix */

/********* common share style ****************/
body {
	background: #fff;
}
a {color: #000;}
img {
	width: auto;
	max-width: 100%;
	height: auto;
}
.not {display: none;}

@keyframes fade_in {
  0% {
	display: none;
	opacity: 0;
	}
  1% {
	display: block;
	opacity: 0;
  }
  100% {
	display: block;
	opacity: 1;
  }
}