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


/* 
※※※ 文面に影響が出そうな箇所は気をつけて変更してください（見出しやtable等） ※※※
※※※ 文面のcssは、common.css , cmscss以下のcssファイルに記述があります ※※※
※※※ 文面ページ、公開ページ、SPのお試しメール送信の着地ページ、 ※※※
*/


/******************************/
/*---------- サイト毎に色変更 -----------*/

/*----- text -----*/

a {
    color:#36F;
}

.next_text {
    color:#36F;
    padding:0 20px 0 0;
    font-size:16px;
    background:url(../img/common/next_txt_arw.png) no-repeat 98% center;
    text-decoration:none;
	display:inline-block;
    transition: 0.1s;
    cursor: pointer;
}

.prev_text {
    color:#36F;
    padding:3px 0 0 15px;
    font-size:16px;
    background:url(../img/common/prev_txt_arw.png) no-repeat 2% center;
    text-decoration:none;
	border: none;
	display:inline-block;
    transition: 0.5s;
    cursor: pointer;
}

.next_text:hover {
    background-position:100% center;
}

.prev_text:hover {
    background-position:0 center;
}

/*---------- btn -----------*/

.next_btn, .prev_btn {
	background:#36F url(../img/common/btn_grass.png) no-repeat center top;
	border: none;
	color: #FFF;
	padding: 15px 0;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	max-width: 320px;
    width: 100%;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align: center;
	text-decoration: none;
	font-family:inherit;
    position:relative;
    box-sizing:border-box;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	transition: 0.3s;
}
.next_btn:hover, .prev_btn:hover {background-color:#37F;}

.next_btn:before, .prev_btn:before {
    content:"";
    width:13px;
    height:23px;
    position:absolute;
    transform: translate(0 , -50%);
    top:50%;
	transition: 0.3s;
}
.next_btn:before {
	background: url(../img/common/next_btn_arw.png) no-repeat;
    right:3%;
}
.next_btn:hover:before {right:2%;}
.prev_btn:before {
	background: url(../img/common/prev_btn_arw.png) no-repeat;
    left:3%;
}
.prev_btn:hover:before {left:2%;}

input[type="submit"], .submit_btn {
	background:#E5004F url(../img/common/btn_grass.png) no-repeat center top;
	border: none;
	color: #FFF;
	padding: 15px 0;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	max-width: 320px;
    width: 100%;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align: center;
	text-decoration: none;
	font-family:inherit;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	transition: 0.3s;
}
input[type="submit"]:hover, .submit_btn:hover {background-color:#ff2c75;}



input[type="submit"].mini, a.mini {
    display: inline-block;
    padding: 5px 19px;
    width: 70%;
	max-width: 150px;
    margin: 0 auto 10px auto;
    vertical-align: top;
    background: #36F url(../img/common/btn_grass.png) no-repeat center top;
    background-size: 180px 22px;
}
input[type="submit"].mini:hover, a.mini:hover {
    background-color: #37F;
}

/* 契約中のユーザーに対して、契約ボタンを灰色にするクラス */
.cancel_btn, .cancel_btn:hover {
	background:#AAA;
	cursor:default;
}
.cancel_btn:before, .cancel_btn:hover:before {
    right:3%;
}

input[type="submit"].deletebtn {background-color:#F60;}
input[type="submit"].deletebtn:hover {background-color:#ff550f;}

input[type="submit"].small_btn {
    max-width:70px;
}

/******************************/
/*---------- common -----------*/

body {font-size:16px;-webkit-text-size-adjust: 100%;}
* {margin:0; padding:0; font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

img {border:none; line-height:0; vertical-align:middle; max-width:100%; height:auto;}
a:hover{text-decoration:none;}
p, div, li, dl { word-wrap:break-word;}
h2, h3, h4, h5 {line-height: 1.2em;}
h2 {font-size:36px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
ul,li{list-style: none;}


.dblock {display:block;}
.dinline_block, .sp_none {display:inline-block;}
.dnone, .pc_none {display:none;}
.fr {float:right;}
.fl {float:left;}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
iframe{border:0;}
.s_text {font-size:12px;}
.b_text {font-weight:bold;}

.clearfix:after, .section_wrapper, .section:after, .block_wrapper:after, .block:after, .s_block:after, ul:after, dl:after {height:0;visibility:hidden;content:" ";display:block;clear:both;}
.clear{clear:both;}


/*---------- upper -----------*/

.block_wrapper{padding:60px 0; ;position: relative;}
.block{width:960px; margin-right:auto; margin-left:auto; position:relative;}
.s_block{width:680px; margin-right:auto; margin-left:auto; position:relative;}
.section_wrapper{text-align:left;}


.frame_box {padding:30px; border-radius:5px; box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
.inner_section {text-align:left; position:relative;}


/*---------- margin,padding -----------*/

.mlrauto{margin-left:auto; margin-right:auto;}
.p15{padding:15px;}
.p20{padding:20px;}
.p30{padding:30px;}
.p60{padding:60px;}

.mb0{margin-bottom:0;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb45{margin-bottom:45px;}
.mb60{margin-bottom:60px;}

.pr0{padding-right:0;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr45{padding-right:45px;}
.pr60{padding-right:60px;}

.pl0{padding-left:0;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl45{padding-left:45px;}
.pl60{padding-left:60px;}

.pt0{padding-top:0;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt45{padding-top:45px;}
.pt60{padding-top:60px;}
.pt120{padding-top:120px;}

.pb0{padding-bottom:0px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb45{padding-bottom:45px;}
.pb60{padding-bottom:60px;}
.pb120{padding-bottom:120px;}


/*----- text -----*/

/*fs = font size */
.fs80{font-size: 80%}
.fs85{font-size: 85%}
.fs90{font-size: 90%}
.fs95{font-size: 95%}
.fs100{font-size: 100%}
.fs105{font-size: 105%}
.fs110{font-size: 110%}
.fs115{font-size: 115%}
.fs120{font-size: 120%}
.fs130{font-size: 130%}
.fs140{font-size: 140%}
.fs150{font-size: 150%}



/*----- img -----*/

/* hover時にズーム */
.hoverExpansion {/* imgの上のaタグにつける */
	overflow:hidden;
    display:block;
}

.hoverExpansion img {transition:transform 0.3s linear;}

.hoverExpansion img:hover {transform:scale(1.03);}


/*----- column -----*/

.sec2_n li {
    width:465px;
    float:left;
    margin-right:30px;
	text-align:left;
}
.sec2_n li img {margin-bottom:30px;}
.sec2_n li a img {margin-bottom:0;}
.sec2_n li .hoverExpansion {margin-bottom:30px;}
.sec2_n li h3 {margin-bottom:10px;}

.sec3_n li {
    width:300px;
    float:left;
    margin-right:30px;
    margin-bottom:30px;
	text-align:left;
}

.sec3_n li img {margin-bottom:20px;}
.sec3_n li a img {margin-bottom:0;}
.sec3_n li .hoverExpansion {margin-bottom:20px;}
.sec3_n li h4 {margin-bottom:10px;}


.sec3_s {max-width:840px; margin-left:auto; margin-right:auto;}
.sec3_s li {
    width:240px;
    float:left;
    margin-right:60px;
	text-align:left;
}
.sec3_s li img {margin-bottom:15px;}
.sec3_s li a img {margin-bottom:0;}
.sec3_s li .hoverExpansion {margin-bottom:15px;}
.sec3_s li h4 {margin-bottom:10px;}

.sec4_n li {
    width:219px;
    float:left;
    margin-right:28px;
	text-align:left;
}
.sec4_n li img {margin-bottom:15px;}
.sec4_n li a img {margin-bottom:0;}
.sec4_n li .hoverExpansion {margin-bottom:15px;}
.sec4_n li h4 {margin-bottom:5px;}

.sec4_s {max-width:840px; margin-left:auto; margin-right:auto;}
.sec4_s li {
    width:165px;
    float:left;
    margin-right:60px;
	text-align:left;
}
.sec4_s li img {margin-bottom:10px;}
.sec4_s li a img {margin-bottom:0;}
.sec4_s li .hoverExpansion {margin-bottom:10px;}
.sec4_s li h4 {margin-bottom:5px;}

.sec2_n li:nth-child(even), .sec3_n li:nth-child(3n), .sec3_s li:nth-child(3n), .sec4_n li:nth-child(4n), .sec4_s li:nth-child(4n) {
	margin-right:0;
}


/*---------- img_left,right -----------*/

.ml30Img{margin-right:30px; float:left;}
.mr30Img{margin-left:30px; float:right;}

.pl510Box{padding-right:510px; width:450px; margin-left:auto; margin-right:auto; text-align:left;position: relative;}
.pr510Box{padding-left:510px; width:450px; margin-left:auto; margin-right:auto; text-align:left;position: relative;}

.mh218{min-height:218px;}

 .wi100{width: 100%;}


/*---------- table -----------*/

.table_layout_fixed{
    table-layout: fixed;
}

table {
    width:100%;
    text-align:left;
	font-size:14px;
	border-collapse:collapse;
    word-break: break-all;
}

th {
    width: 30%;
    padding: 10px;
    font-size: 16px;
    text-align:left;
}

td {
    padding:8px;
}

button, input, select, textarea, submit {
	font-family:inherit;
	font-size:100%;
    -webkit-user-select:auto;
    vertical-align: middle;
}

button, input[type="submit"], input[type="button"], select {-webkit-appearance:none;}
textarea{width:100%;}
select::-ms-expand {display:none;}

input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], select, textarea{
    border:1px solid #CCC;
    border-radius:5px;
    padding:5px 10px;
	font-size:16px;
    box-sizing:border-box;
}

select {
    background:#FFF url(../img/common/select_default.png) no-repeat 98% center;
    background-size:16px;
    -webkit-background-size:16px;
	-moz-appearance:none;
	text-indent:0.01px;
	text-overflow:'';
	padding:5px 20px 5px 5px;
}

input[type="file"] {
	width:100%;
	cursor:pointer;
}

label {display:inline-block; cursor:pointer; font-size:16px;}
.error_message{font-weight:bold; color:#C00;}

/* type="number"のスピナーを削除 */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance:textfield;
}

/* モーダル上で動作させるため変更 */
div.baloon {
   position: absolute;
   z-index:103 !important;
    min-width:130px;
}

div.baloon a {
    color: #F60;
    text-decoration: none;
    padding: 3px;
    height: 9px;
    line-height: 9px;
    display: inline-block;
    margin-right: 5px;
    background: #FFF;
    border-radius: 100%;
    font-size: 12px;
}

div.baloon a:hover {
    background-color: #F5F5F5;
}

div.baloon div {
    background: #F60;
    padding: 3px 5px;
    color: #FFF;
    border-radius: 18px;
    font-size: 12px;
}


/********************************************************************************************/
/********************************************************************************************/
/********************************************************************************************/
/*レスポンシブ対応ここから*/

@media screen and (max-width: 960px) {

	body{min-width:1000px;}

}


/********************************************************************************************/
/********************************************************************************************/
/********************************************************************************************/
@media screen and (max-width: 480px) {

	body{min-width:100%;}


	/*---------- common -----------*/

	ul, iframe {width:100%;}

    .next_btn, .prev_btn, input[type="submit"] {
        width:100%;
        box-sizing:border-box;
    }

	h2 {font-size:22px;}
	h3 {font-size:18px;}
	h4 {font-size:16px;}
	p, a, li, dl, span {font-size:14px;}

	iframe {height:270px;}

	.pc_none, th, td {display:block;}
	.sp_none {display:none;}

	/*---------- upper -----------*/

	.block_wrapper{padding-left:5%; padding-right:5%;}
	.block, .s_block {width:100%;}


	/*----- column -----*/

	.sec2_n li {
		width:100%;
		margin-right:0;
		margin-bottom:30px;
	}
	.sec2_n li img {margin-bottom:20px;}
	.sec2_n li .hoverExpansion {margin-bottom:20px;}

	.sec3_n li, .sec3_s li, .sec4_n li, .sec4_s li {
		width:49%;
		margin-right:2%;
		margin-bottom:15px;
	}
	.sec3_n li:nth-child(even), .sec3_s li:nth-child(even), .sec4_n li:nth-child(even), .sec4_s li:nth-child(even) {
		margin-right:0;
	}

	.sec3_n li img, .sec3_s li img, .sec4_n li img, .sec4_s li img {margin-bottom:15px;}
	.sec3_n li .hoverExpansion, .sec3_s li .hoverExpansion, .sec4_n li .hoverExpansion, .sec4_s li .hoverExpansion {margin-bottom:15px;}

	.sec2_n li:last-child, .sec3_n li:last-child, .sec3_s li:last-child,
	.sec4_n li:nth-last-child(2), .sec4_n li:last-child,
	.sec4_s li:nth-last-child(2), .sec4_s li:last-child {
		margin-bottom:0;
	}


	/*---------- img_left,right -----------*/

	.ml30Img, .mr30Img {
		float: none;
		margin-bottom:15px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		display:block;
	}

	.pl510Box, .pr510Box {
		width:90%;
		padding-top:308px;
		padding-left:0;
		padding-right:0;
	}



	/*----- table -----*/

	table {border:none;}

	th, td {
		width:100%;
		display:block;
		box-sizing:border-box;
		border:none;
	}

	input[type="text"], input[type="tel"], input[type="password"], input[type="email"], input[type="url"], textarea {
		width:100% !important;
	}

    input[type="text"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, select:focus, textarea:focus{
        border:1px solid #36F;
    }


	input[name="denwa1"], input[name="zip1"] {
		width:23% !important;
	}

	input[name="denwa2"], input[name="denwa3"], input[name="zip2"] {
		width:28% !important;
	}

	select{padding:5px 16px 5px 5px; max-width:100%;}
	.secondselect {width:45% !important;}
    label{padding:5px 0;}

    div.baloon {
        left:inherit !important;
        right:5px;
    }

}