@charset 'UTF-8';

/*

    Base

*/


/*  common  */

#c_main section:not([id="m_review"]) h2 {
	font-family:"游明朝体", "Yu Mincho", YuMincho;
	text-align:center;
	margin-bottom:30px;
}
@media screen and (min-width:800px) {
    #c_main section:not([id="m_review"]) h2 {
	    font-size:2.5em;
    }
}


/*

    section:#m_price

*/


/*#monthly_price*/
#c_main #m_price .content #monthly_price {
	width:80%;
	border-radius:10px;
	background-color:rgb(41,110,180);
	color:#FFFFFF;
	box-sizing:border-box;
	padding:15px;
	margin:0 auto;
	position:relative;/*z-indexに必要*/
	z-index:1;
}
#c_main #m_price .content #monthly_price p {
	margin:0;
	font-weight:bold;
	line-height:1;
}
#c_main #m_price .content #monthly_price p:first-child {
	font-size:1em;
	text-align:center;
	margin-bottom:0.5em;
}
#c_main #m_price .content #monthly_price p:last-child {
	font-size:1.25em;
	text-align:center;
}
#c_main #m_price .content #monthly_price p:last-child strong {
	font-size:50px;
	font-family:"游明朝体", "Yu Mincho", YuMincho;
	margin:0 0.25em;
}
@media screen and (min-width:800px) {
	#c_main #m_price {
		padding:45px 0 30px;/*top_copyからの空き45px、左右0、下30px*/
	}
	#c_main #m_price .content #monthly_price p:first-child {
		font-size:1.5em;
		text-align:left;
	}
	#c_main #m_price .content #monthly_price p:last-child {
		font-size:3em;
	}
	#c_main #m_price .content #monthly_price p:last-child strong {
		font-size:100px;
	}
}

/*

    section:#m_review

*/


#c_main #m_review .content{
	width:90%;
	background-color:#FFFFFF;
	margin:0 auto;
	box-sizing:border-box;
	margin-top:-90px;/*自身のsectionのpadding-top分15px + 上のsectionのpadding-bottom分15px + 重なり分60px*/
	box-sizing:border-box;
	padding:60px 10px 15px;/*上げたpadding-top分15pxを通常の分に+する*/
}
@media screen and (min-width:800px) {
	#c_main #m_review .content{
		margin-top:-90px;/*自身のsectionのpadding-top分30px + 上のsectionのpadding-bottom分30px + 重なり分30px*/
		box-sizing:border-box;
		padding:60px 30px 30px;/*上げたpadding-top分30pxを通常の分に+する*/
	}	
}

/*#monthly_view*/
#c_main #m_review .content #monthly_view {
	width:90%;
	margin:0 auto;
	box-sizing:border-box;
}
#c_main #m_review .content #monthly_view .container {
	box-sizing:border-box;
	overflow:hidden;
}
#c_main #m_review .content #monthly_view h2 {
	text-align:center;
	margin-top:15px;
}
#c_main #m_review .content #monthly_view h2 .icon {
	width:30px;
	height:30px;
	margin-right:10px;
}
#c_main #m_review .content #monthly_view #update {
	text-align:center;
}
#c_main #m_review .content #monthly_view .container .item {
	width:45%;
	box-sizing:border-box;
	margin-bottom:15px;
	float:left;
	margin-left:10%;
}
#c_main #m_review .content #monthly_view .container .item:nth-of-type(odd) {
	margin-left:0;
}
#c_main #m_review .content #monthly_view .container .item img {
	width:100%;
	margin-bottom:10px;
	box-sizing:border-box;
	box-shadow:2px 2px 4px #333333;
}
#c_main #m_review .content #monthly_view .container .item .new {
	display:inline-block;
	width:3em;
	padding:0 0.25em;
	background-color:rgb(142,59,70);
	border-radius:5px;
	font-size:0.9em;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	margin-right:0.5em;
}
#c_main #m_review .content #monthly_view .container .item dl {
	box-sizing:border-box;
	padding:10px 0;
}
#c_main #m_review .content #monthly_view .container .item dl dd {
	margin-bottom:10px;
}
#c_main #m_review .content #monthly_view .container .item .label {
	font-size:0.9em;
	font-weight:bold;
	color:rgb(142,59,70);
}
#c_main #m_review .content #monthly_view .container .item .price {
	font-size:1em;
	font-weight:bold;
}
#c_main #m_review .content #monthly_view .container .item .price_unit {
	font-size:0.75em;
	font-weight:bold;
	margin-left:0.25em;
}
#c_main #m_review .content #monthly_view .container .item ul {
	font-size:0.75em;
	font-weight:bold;
	text-align:justify;
	text-justify:distribute;
}
#c_main #m_review .content #monthly_view .container .item .comment {
	display:none;
}

@media screen and (min-width:800px) {
	#c_main #m_review .content #monthly_view {
		width:100%;
	}
	#c_main #m_review .content #monthly_view h2 {
		display:inline-block;
	}
	#c_main #m_review .content #monthly_view #update {
		display:inline-block !important;
		float:right !important;
	}
	#c_main #m_review .content #monthly_view .container {
		clear:right !important;
		overflow:hidden;
	}
	#c_main #m_review .content #monthly_view .container .item {
		width:21.25%;
		float:left;
		margin-left:5%;
		margin-bottom:0;
	}
	#c_main #m_review .content #monthly_view .container .item:nth-of-type(odd) {
		margin-left:5%;
	}
	#c_main #m_review .content #monthly_view .container .item:first-of-type {
		margin-left:0;
	}
	#c_main #m_review .content #monthly_view .container .item .comment {
		display:block;
		font-size:0.75em;
		margin:0;
}
}


/*

    section:#features

*/


#c_main #features .content {
}
#c_main #features .content h2 {
	color:rgb(41,110,180);
}
#c_main #features .content ol {
	width:90%;
	margin:0 auto;
}
#c_main #features .content ol .container{
	position:relative;
}
#c_main #features .content ol .container .num {
	display:inline-block;
	background-color:rgb(41,110,180);
	width:40px;
	height:40px;
	font-family:"游明朝体", "Yu Mincho", YuMincho;
	font-size:28px;
	color:#FFFFFF;
	text-align:center;
	line-height:40px;
	position:absolute;
	top:-20px;
}
#c_main #features .content ol .container li {
	background-color:#FFFFFF;
	margin-bottom:30px;
	box-sizing-border-box;
	padding:15px 15px 15px 50px;
}
#c_main #features .content ol .container li strong {
	font-size:1.25em;
	font-family:"游明朝体", "Yu Mincho", YuMincho;
	color:rgb(41,110,180);
}
#c_main #features .content ol .container li .text {
	display:inline-block;
	text-align:justify;
	text-justify:distribute;
}
@media screen and (min-width:800px) {
	#c_main #features .content ol .container .num {
		display:inline-block;
		background-color:rgb(41,110,180);
		width:50px;
		height:50px;
		font-family:"游明朝体", "Yu Mincho", YuMincho;
		font-size:38px;
		color:#FFFFFF;
		text-align:center;
		line-height:50px;
		position:absolute;
		top:20px;
		left:-25px;
	}
	#c_main #features .content ol .container li {
		height:70px;
		padding:15px 15px 15px 35px;
	}
	#c_main #features .content ol .container li strong {
		display:inline-block;
		width:40%;
		font-size:28px;
		line-height:1;
		vertical-align:middle;
	}
	#c_main #features .content ol .container li .text {
		display:inline-block;
		width:60%;
		vertical-align:middle;
	}
}


/*

    section:#columns

*/

#c_main #columns .content .frame {
	overflow:hidden;
}
#c_main #columns .content .frame .container {
}
#c_main #columns .content .frame .container .item {
	position:relative;
	float:left;
}
#c_main #columns .content .frame .container .item article {
	background-color:#FFFFFF;
	box-sizing:border-box;
	padding:2em;
	overflow:hidden;/*article内コンテンツのfloat解除のため*/
	
	width:90%;
	margin:0 auto;
}
#c_main #columns .content .frame .container .item .prev_arrow,
#c_main #columns .content .frame .container .item .next_arrow {
	display:none;
}
#c_main #columns .content .frame .container .item article p {
	width:100%;
	text-align:justify;
	text-justify:distribute;
}
#c_main #columns .content .frame .container .item article img {
	width:100%;
	height:auto;
}
#c_main #columns .content .frame .container .item article hr {
	border-bottom: 1px solid #808080;
}
#c_main #columns .content .frame .container .item article .prev,
#c_main #columns .content .frame .container .item article .next {
	display:inline-block;
	width:auto;
	margin:0;
	margin-top:1em;
	cursor:pointer;
}
#c_main #columns .content .frame .container .item article .prev {
	float:left;
	text-align:left;
}
#c_main #columns .content .frame .container .item article .next {
	float:right;
	text-align:right;
}
#c_main #columns .content .frame .container .item article .prev .tag,
#c_main #columns .content .frame .container .item article .next .tag{
	display:block;
	margin:0;
}
#c_main #columns .content .frame .container .item article .prev .highlight,
#c_main #columns .content .frame .container .item article .next .highlight{
	background-color:rgba(255,255,0,0.5);
}
@media screen and (min-width:800px) {
	#c_main #columns .content .frame .container .item {
		max-width:1020px;
	}
	#c_main #columns .content .frame .container .item article {
		width:80%;
	}
	#c_main #columns .content .frame .container .item .prev_arrow {
		display:block;
		border-bottom:1px solid #FFFFFF;
		border-left:1px solid #FFFFFF;
		width:30px;
		height:30px;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		cursor:pointer;
		
		position:absolute;
		top:50%;
		left:50px;
	}
	#c_main #columns .content .frame .container .item .next_arrow {
		display:block;
		border-right:1px solid #FFFFFF;
		border-bottom:1px solid #FFFFFF;
		width:30px;
		height:30px;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		cursor:pointer;
		
		position:absolute;
		top:50%;
		right:50px;

	}
	#c_main #columns .content .frame .container .item article img {
		width:35%;
		float:right;
		margin-left:1em;
		margin-bottom:1em;
	}
	#c_main #columns .content .frame .container .item article hr {
		clear:right;
	}
	#c_main #columns .content .frame .container .item article .prev .tag,
	#c_main #columns .content .frame .container .item article .next .tag{
		display:inline;
		margin:0 1em;
	}
}



/*

    section:#contact_us

*/

#c_main #contact_us .content .allcatchwrap {
	text-align:center;
}
#c_main #contact_us .content .allcatchwrap .leftline,
#c_main #contact_us .content .allcatchwrap .rightline {
	margin:0;
	display:inline-block;
	height:100px;
	border-left:1px solid #FFFFFF;
}
#c_main #contact_us .content .allcatchwrap .leftline {
	transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	margin-right:30px;
}
#c_main #contact_us .content .allcatchwrap .rightline {
	transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	margin-left:15px;
}
#c_main #contact_us .content .allcatchwrap .catchwrap {
	width:55%;
	display:inline-block;
}
#c_main #contact_us .content .allcatchwrap .catchwrap .sub_catch {
	margin:0;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	margin-bottom:15px;
}
#c_main #contact_us .content .allcatchwrap .catchwrap .catch {
	margin:0;
	font-size:2em;
	font-weight:bold;
	font-family:"游明朝体", "Yu Mincho", YuMincho;
	color:#FFFFFF;
	text-align:center;
	margin-bottom:15px;
}
#c_main #contact_us .content .container {
	width:90%;
	margin:0 auto;
}
#c_main #contact_us .content ul {
	font-size:1.25em;
	font-weight:bold;
	color:rgb(255,211,13);
	text-align:center;
	margin-bottom:30px;
}

/*tel and mail*/
#c_main #contact_us .content .container .tel,
#c_main #contact_us .content .container .mail {
	width:100%;
	margin-bottom:15px;
	text-align:center;
	color:#FFFFFF;
}
#c_main #contact_us .content .container .tel .frame,
#c_main #contact_us .content .container .mail .frame {
	width:100%;
	height:50px;/*高さを決める*/
	box-sizing:border-box;
	border:1px solid #FFFFFF;
	margin-bottom:10px;
	line-height:50px;/*＝高さで上下中央寄せ*/
}
#c_main #contact_us .content .container .tel .frame {
	font-family:'Dancing Script', serif;
	font-size:2em;
	color:#FFFFFF;
}
#c_main #contact_us .content .container .mail .frame {
	font-size:1.25em;
	color:#FFFFFF;
}
#c_main #contact_us .content .container .tel .frame img,
#c_main #contact_us .content .container .mail .frame img {
	height:50px;
	margin-right:10px;
	vertical-align:top;/*文字と上位置を合わせる*/
}
#c_main #contact_us .content .container a,
#c_main #contact_us .content .container .tel p,
#c_main #contact_us .content .container .mail p {
	margin:0;
}

@media screen and (min-width:800px) {
	#c_main #contact_us .content .allcatchwrap .catchwrap .catch {
		font-size:2.5em;
	}
	#c_main #contact_us .content .container{
		width:80%;
		overflow:hidden;
	}
	#c_main #contact_us .content .container .tel,
	#c_main #contact_us .content .container .mail {
		width:45%;
	}
	#c_main #contact_us .content .container .tel {
		float:left;
	}
	#c_main #contact_us .content .container .mail {
		float:right;
	}
}

/*

    section:#list

*/

#c_main #list .content {
	color:#FFFFFF;
}
#c_main #list .content p {
	width:90%;
	margin:0 auto;
	text-align:center;
	margin-bottom:1em;
}
#c_main #list .content .container {
	width:90%;
	margin:0 auto;
}
#c_main #list .content .container dl {
	margin-bottom:30px;
}
#c_main #list .content .container dl dt {
	font-family:'Dancing Script', serif;
	font-size:2em;
	color:rgb(255,211,13);
	border-bottom:1px solid rgb(255,211,13);
	margin-bottom:0.5em;
}
@media screen and (min-width:800px) {
	#c_main #list .content .container{
		width:80%;
		overflow:hidden;
	}
	#c_main #list .content .container .left,
	#c_main #list .content .container .right {
		width:45%;
	}
	#c_main #list .content .container .left {
		float:left;
	}
	#c_main #list .content .container .right {
		float:right;
	}
}



/*

    section:#how_to

*/


#c_main #how_to .content p {
	margin:0 auto 30px;
	text-align:center;
}

/*#syuccyou #yuusou*/
#c_main #how_to .content .container #syuccyou,
#c_main #how_to .content .container #yuusou{
	width:90%;
	margin:0 auto 30px;
	background-color:#FFFFFF;
	box-sizing:border-box;
	padding:20px;
	color:rgb(41,110,180);
	text-align:center;
}
#c_main #how_to .content .container #syuccyou h3,
#c_main #how_to .content .container #yuusou h3{
	margin-bottom:15px;
}
#c_main #how_to .content .container #syuccyou p,
#c_main #how_to .content .container #yuusou p{
	margin-bottom:30px;
}
#c_main #how_to .content .container #yuusou p em{
	display:block;
	margin-top:15px;
	font-size:13px;
}
#c_main #how_to .content .container #syuccyou .step,
#c_main #how_to .content .container #yuusou .step{
	box-sizing:border-box;
	padding:15px 0;
	overflow:hidden;
}
#c_main #how_to .content .container #syuccyou .step h4,
#c_main #how_to .content .container #yuusou .step h4{
	margin-bottom:15px;
}
#c_main #how_to .content .container #syuccyou .step img,
#c_main #how_to .content .container #yuusou .step img{
	float:left;
	width:30%;
	margin-right:20px;
}
#c_main #how_to .content .container #syuccyou .step p,
#c_main #how_to .content .container #yuusou .step p{
	margin:15px 0;
	font-size:13px;
	text-align:justify;
	text-justify:disribute;
}
#c_main #how_to .content .container #syuccyou .step:not(:last-child):after,
#c_main #how_to .content .container #yuusou .step:not(:last-child):after{
	display:block;
	content:"";
	border-left:1px solid rgb(41,110,180);
	border-bottom:1px solid rgb(41,110,180);
	width:30px;
	height:30px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	
	margin:0 auto;
	margin-bottom:15px;
}

/*#yuusou .adbox*/

#c_main #how_to .content .container #yuusou .step .adbox{
	width:80%;
	margin:0 auto;
	border:1px solid rgb(41,110,180);
	box-sizing:border-box;
	padding:15px;
	margin-bottom:15px;
}
#c_main #how_to .content .container #yuusou .step .adbox p{
	margin:0;
}
#c_main #how_to .content .container #yuusou .step .adbox hr{
	border-bottom:1px solid rgb(41,110,180);
}

/*#caution*/

#c_main #how_to .content .container #caution {
	width:90%;
	margin:0 auto;
	border:1px solid rgb(41,110,180);
	box-sizing:border-box;
	padding:20px;
}
#c_main #how_to .content .container #caution h3 {
	font-family:"游明朝体", "Yu Mincho", YuMincho;
	color:rgb(41,110,180);
	text-align:center;
	margin-bottom:15px;
}
#c_main #how_to .content .container #caution ul {
	color:rgb(41,110,180);
	margin-left:1em;/*liのインデント分だけ戻す*/
	text-align:justify;
	text-justify:distribute;
}
#c_main #how_to .content .container #caution ul li {
	text-indent:-1em;
}
#c_main #how_to .content .container #caution ul li:before {
	display:inline;
	content:"※";
}

@media screen and (min-width:800px) {
	#c_main #how_to .content .container {
		width:80%;
		margin:0 auto;
		overflow:hidden;
	}
	#c_main #how_to .content .container #syuccyou,
	#c_main #how_to .content .container #yuusou{
		width:45%;
	}
	#c_main #how_to .content .container #syuccyou{
		float:left;
	}
	#c_main #how_to .content .container #yuusou{
		float:right;
	}
	#c_main #how_to .content .container #caution{
		clear:both;
		width:100%;
	}
}


/*

    section:#question

*/
#c_main #question .content h2 {
	color:#FFFFFF;
}
#c_main #question .content dl {
	width:90%;
	margin:0 auto;
}

#c_main #question .content dl dt,
#c_main #question .content dl dd {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	padding:15px;
	text-align:justify;
	text-justify:distribute;
}
#c_main #question .content dl dt strong,
#c_main #question .content dl dd strong {
	font-size:1.5em;
	margin-right:10px;
}

/*question*/
#c_main #question .content dl dt {
	background-color:rgb(41,110,180);
	color:#FFFFFF;
	position:relative;
	margin-bottom:15px;
}
#c_main #question .content dl dt:after {
	content:"";
	border:10px solid transparent;
	border-top:10px solid rgb(41,110,180);
	position:absolute;
	top:100%;
	left:24px;
}
#c_main #question .content dl dt strong {
	color:rgb(255,211,13);
}

/*answer*/
#c_main #question .content dl dd {
	background-color:#FFFFFF;
	margin-bottom:30px;
}
#c_main #question .content dl dd strong {
	color:rgb(41,110,180);
}

@media screen and (min-width:800px) {
	#c_main #question .content dl {
		width:80%;
	}
}



/*

    section:#voice

*/

#c_main #voice .content .container {
	width:90%;
	margin:0 auto;
}
#c_main #voice .content .container ul {
	margin:0 auto;
}
#c_main #voice .content .container ul li {
	background-color:#FFFFFF;
	box-sizing:border-box;
	padding:15px;
	margin-bottom:30px;	
}
#c_main #voice .content .container ul li .customer {
	display:block;
	border-top:1px solid rgb(41,110,180);
	color:rgb(41,110,180);
	text-align:right;
	padding-top:1em;
	margin-top:1em;
}

@media screen and (min-width:800px) {
	#c_main #voice .content .container {
		width:80%;
		overflow:hidden;
	}
	#c_main #voice .content .container ul {
		width:45%;
	}
	#c_main #voice .content .container .left {
		float:left;
	}
	#c_main #voice .content .container .right {
		float:right;
	}
}



/*

    section:#contact_form

*/

#c_main #contact_form .content {
	width:90%;
}
#c_main #contact_form .content h2 {
	text-align:center;
}
#c_main #contact_form .content p {
	text-align:center;
}
#c_main #contact_form .content form {
	margin:30px 0;
}
#c_main #contact_form .content form .Error {
	text-align:center;
	font-weight:bold;
	color:#FF0000;
	margin-bottom:30px;
}
#c_main #contact_form .content form table {
	width:100%;
	margin:0 auto;
}
#c_main #contact_form .content form table tr {
	width:100%;
	margin-bottom:1em;
}
#c_main #contact_form .content form table tr th {
	width:100%;
	display:block;
	font-weight:bold;
	vertical-align:top;
}
#c_main #contact_form .content form table tr th .tag {
	display:inline-block;
	background-color:rgb(41,110,180);
	width:3em;
	padding:0 0.25em;
	border-radius:5px;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	margin-right:0.5em;
}
#c_main #contact_form .content form table tr td {
	width:100%;
	display:block;
}
#c_main #contact_form .content form table tr td input, 
#c_main #contact_form .content form table tr td textarea{
	width:100%;
}
#c_main #contact_form .content form table tr td input:last-of-type {
	margin-bottom:1em;
}
#c_main #contact_form .content form table tr td .description {
	display:block;
	font-size:0.8em;
	margin-bottom:1em;	
}
#c_main #contact_form .content form input[type="submit"] {
	display:block;
	margin:30px auto;
	width:100px;
	min-height:30px;
	line-height:30px;
	box-sizing:border-box;
	padding:0 5px;
	border:none;
	border-radius:5px;
	background-color:rgb(41,110,180);
	font-size:1em;
	font-weight:bold;
	color:#FFFFFF;
}
#c_main #contact_form .content form input[type="submit"]:hover {
	background-color:rgba(41,110,180,0.75);
}
#c_main #contact_form .content a:not([class="normal"]) {
	display:block;
	margin:30px auto;
	width:100px;
	min-height:30px;
	line-height:30px;
	box-sizing:border-box;
	padding:0 5px;
	border:none;
	border-radius:5px;
	background-color:rgb(41,110,180);
	font-size:1em;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
#c_main #contact_form .content a:not([class="normal"]):hover {
	background-color:rgba(41,110,180,0.75);
}
#c_main #contact_form .content a.normal {
	display:block;
	color:rgb(41,110,180);
	text-align:center;
	font-weight:bold;
}
#c_main #contact_form .content #finish a {
	width:150px;
}
#c_main #contact_form .content #finish p:last-of-type {
	font-size:1em;
	font-weight:bold;
	color:rgb(41,110,180);
}
@media screen and (min-width:800px) {
	#c_main #contact_form .content{
		width:80%;
	}
	#c_main #contact_form .content form table{
		width:80%;
	}
	#c_main #contact_form .content form table tr th {
		display:table-cell;
		width:30%;
	}
	#c_main #contact_form .content form table tr td {
		display:table-cell;
		width:70%;
	}
}