@charset "UTF-8";
/* CSS Document */

html, body {
	height: 100%;
}

body {background: #fff;}

.wrap {height:100%; min-height: 100%;}
.inner { margin-left: auto; margin-right: auto; width: 640px; padding: 20px 0 40px; }
@media screen and (max-width:639px){
	.inner {width:90%;}
	h1 {font-size:5vw;}
}

img {max-width:100%;}

h1.tit-1 {font-size:2.4rem;}
h2.tit-2 {font-size:1.8rem; text-indent: -1.5em; padding-left: 1.5em;}
h3.tit-3 {font-size:1.4rem;}

.lv_tit-2 {font-size: 1.8rem; text-align: center;}
@media screen and (max-width:639px){
	.lv_tit-2 {text-align: left;}
}

.mat {font-weight: bold; background: #222; color:#fff; padding: 0.2em;}
.list li {text-indent: -1.2em; padding-left: 1.2em; margin-bottom: 0.5em;}
.list b {font-size:1.8rem; margin-right: 0.2em;}

.kei {border-bottom: 1px solid #ccc;}

/* ------------------------------ title text 
*/
.t80 {font-size:8.0rem;}
.t50 {font-size:5.0rem;}
.t40 {font-size:4.0rem;}
.t30 {font-size:3.0rem;}
.t28 {font-size:2.8rem;}
.t24 {font-size:2.4rem;}
.t22 {font-size:2.2rem;}
.t20 {font-size:2.0rem;}
.t18 {font-size:1.8rem;}
.t16 {font-size:1.6rem;}
.t15 {font-size:1.5rem;}
.t14 {font-size:1.4rem;}
.t13 {font-size:1.3rem;}
.t12 {font-size:1.2rem !important;}
.t11 {font-size:1.1rem !important;}
.t10 {font-size:1.0rem !important;}

.shw {display: none;}
.hid {dsipaly:block;}
@media screen and (max-width:639px){
.shw {display: block;}
.hid {dsipaly:none;}	
}

/* ----------------------------- margin 
*/
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb60 {margin-bottom:60px;}

.ml-10 {margin-left: 10px;}
.mr-20 {margin-right: 20px;}
.mr-40 {margin-right: 40px;}
.mr-60 {margin-right: 60px;}

.mt-10 {margin-top: 10px;}
.mt-5 {margin-top: 5px;}

.pd-20-all {padding: 20px;}
.pd-10-all {padding: 10px;}
.pd-5-all {padding: 5px;}
.pd-20-bottom {padding-bottom: 20px !important;}
.pd-10-bottom {padding-bottom: 10px !important;}
.pd-20-top {padding-top: 20px !important;}
.pd-10-top {padding-top: 10px !important;}

.s-mr-15 {margin-right: 15px;}



/* ------------------------------ background 
*/

.bg-onepura {background: #DFEEFF  !important;}
.bg-e6 {background: #e6e6e6;}
.bg-ccc {background: #ccc;}

.bg-gray {background: #EFEFEF;}
.bg-mizu {background: #DFEEFF;}
.bg-white {background: #fff;}
.bg-grey {background: #f2f2f2;}
.bg-blue {background: #0071BC;}
.bg-orange{background: #F7931E ;}
.bg-emerald {background:#58BCBC;}



/* width */

.w_half { width: 50% !important;}
.w140, .w140 dt	{ width: 140px;}
.w400 {width:400px;}
.w300 {width:300px;}
.w280 {width:280px;}
.w240 {width:240px;}
.w200 {width:200px;}
.w180 {width:180px;}
.w160 {width:160px;}
.w150 {width:150px;}
.w120 {width:120px !important;}
.w130 {width:130px;}
.w100 {width:100px;}
.w80 {width:80px;}
.w70 {width:70px;}
.w63 {width:63px !important;}
.w60 {width:60px;}
.w50 {width:50px;}
.w55 {width:55px;}
.w40 {width:40px;}
.w30 {width:30px;}
.w20 {width:20px;}
.w10 {width:10px;}

.w100p {width:100% !important;}
.w85p {width:85%;}
.w80p {width:80%;}
.w70p {width:70%;}
.w60p {width:60%;}
.w52p {width:52%;}
.w50p {width:50%;}
.w49p {width:49%;}
.w40p {width: 40%;}
.w30p {width: 30%;}
.w25p {width:25% !important;}
.w20p {width:20% !important;}
.w15p {width:15% !important;}
.w10p {width:10% !important;}


.pdt20 {padding-top:20px;}

.pd-20-tb {padding-top:20px; padding-bottom: 20px;}

/* color */
.green {color: #b0d547;}
.purple {color:#bf8ff2;}
.yellow {color:#feca00;}
.pink {color:#f77876;}
.blue {color:#00a3fc;}
.dark_blue {color:#336699;}
.oran {color:#f7931e;}
.orange {color:#F7931E;}
.red {color: #f00 !important;}
.whi {color:#fff !important;}
.blu {color:#0071BC;}
.emerald {color:#58BCBC;}

.fc9 {color:#999;}



/* ------------------------------ Messege --*/
/* ボーダーありの吹き出し */

.balloon-set-box {
  display: flex;
  flex-wrap: wrap;
}
.balloon-set-box.left { /* 左 */
  flex-direction: row;
}
.balloon-set-box.right { /* 右 */
  flex-direction: row-reverse; /* アイコンと吹き出しの並びを入れ替える */
}
.balloon {
  position: relative; /* 三角の位置を固定するために設定 */
  display: block;
max-width: 480px;
  margin: 10px auto 20px; /* 上 左右 下のマージン */
  padding: 15px 20px; /* ふきだし内の余白 */
  background: #fff; /* 背景色 */
  border-radius: 6px;
	border:1px solid #ccc;
}
.balloon::before,.balloon::after {
  content: '';
  border: 14px solid transparent;
  border-top-color: #fff;
  position: absolute;
  top: 0;
}
.right .balloon{border:1px solid #7FB8DD;} 
.left .balloon::before { /* 左側からの三角の位置 */
 	border-top-color: #ccc;
	top:-1px;
	left: -14px;
}
.left .balloon::after { /* 左側からの三角の位置 */
	border-top-color: #fff;
  left: -11px;
}
.right .balloon::before { /* 左側からの三角の位置 */
 	border-top-color: #7FB8DD;
	top:-1px;
	right: -14px;
}
.right .balloon::after { /* 右側からの三角の位置 */
  right: -11px;
}

.balloon textarea {
	border:none;
}


.btn {
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	padding: 10px ;
	display: inline-block;
	line-height: 1;
	font-weight: bold;	
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	color: #fff;
	position: relative;
}
.btn:hover{opacity: 0.8;}

.btn-col3 {text-align: center; letter-spacing: -.4em; width: 100%;}
.btn-col3 li{display:inline-block; margin-bottom: 20px; letter-spacing: normal; width: 30%;}
.btn-col3 li:nth-child(2){margin-left:4%; margin-right: 4%;}

@media screen and (max-width:639px){
	.btn-col3 li{display: block; width: 100%;}
	.btn-col3 li:nth-child(2){margin-left:0%; margin-right: 0%;}
}