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

/*----------------------------------------------------------

ロゴマーク使用報告css
----------------------------------------------------------*/
body{
	background-color: #F5F5F5;
}
.logo_wrap{
	background-color: #fff;
	border-radius: 30px;
	padding: 50px;
	margin-top: 40px;
}
.logo_title{
	font-size: 1.875em;
	border-bottom: 5px double #333;
	padding: 0 0 .5em;
	margin: 0 0 1em;
}
.logo_intro{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 30px;
}
.logo_intro_img img{
	border: 1px solid #D1D1D1;
	max-width: 100%;
	height: auto;
}
.logo_intro_text{
	width: 60%;
	font-weight: bold;
	line-height: 2em;
}
.logo_intro_text p{
	margin: 0;
	padding: 0;
}
.logo_intro_text p + p{
	margin-top: 2em;
}
/*（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.logo_wrap{
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin: 15px;
		width: calc(100% - 30px);
	}
	.logo_title{
		font-size: 1.3em;
	}
	.logo_intro{
		display: block;
		padding: 0;
	}
	.logo_intro_img{
		text-align: center;
		width: 100%;
	}
	.logo_intro_img img{
		max-width: 200px;
	}
	.logo_intro_text{
		width: 100%;
	}
	.logo_intro_text p{
		margin-top: 2em;
	}
}




/*----------------------------------------------------------
　フォーム周り
----------------------------------------------------------*/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*------------------------------------------
PC スタイル例
------------------------------------------*/
.form{}
.form_title{
	font-size: 1.5625em;
	font-weight: bold;
	border-bottom: 1px solid #000;
	line-height: 1.7em;
	padding: 0 0 .5em;
	margin: 2em 0 .5em;
}
.confirm_box .form_title,
.logo_wrap > .form_title{
	margin-top: 0;
}
.form dl{
	margin: 0;
	padding: 1em 0 0;
	font-size: 1.125em;
}
.form dt{
	width: 14em;
	padding: 0;
	margin: 0;
	float: left;
	min-height: 3em;
	line-height: 2em;
	font-weight:bold;
}
.form dd{
	width: 100%;
	padding: 0 0 1em 15em;
	margin: 0 0 1em;
	border-bottom: 1px solid #BCBCBC;
	min-height: 3em;
	line-height: 2em;
}
.form .red{
	color: #E36953;
}
.form .wide_dlc{
	width: 100%;
	border-bottom: none;
	padding: 0 0 1em;
	margin: 0;
}
.form dt.wide_dlc{
	padding: 0 0 .5em;
}
.form .wide_dlc p{
	line-height: 1.5em;
	font-size: .9em;
}
.logo_link_list{
	margin: 1em 0;
	padding: 0;
	list-style: none;
	font-size: .9em;
	line-height: 1.5em;
}
.logo_link_list li{
	margin: 0;
	padding: 0;
}
.logo_link_list li + li{
	margin: .5em 0 0;
}
.logo_link_list a{
	color: #E98228;
}
.logo_link_list a:hover{
	text-decoration: none;
}
.agreement{
	text-align: center;
	font-weight: bold;
}
.confirm_box .wide_dlc p.agreement{
	text-align: center;
	font-weight: normal;
	font-size: 1em;
}
/*フォーム要素*/
input[type="text"],input[type="tel"],textarea{
	width: 100%;
	font-size: 1em;
	line-height: 1.5em;
	border: 1px solid #BCBCBC;
	border-radius: 4px;
	padding: .2em;
}
textarea{
	height: 10em;
}
select{
	width: 100%;
	line-height: 1.5em;
	font-size: 1em;
}
/*input[type="submit"]{
	min-width: 50%;
	padding: .5em 2em;
	margin: 0 auto;
	display: block;
	font-size: 1.2em;
	color: #fff;
	background-color: #666666;
}*/
label + input{
	margin-left: 2em;
}
.back_link{
	text-align: center;
}
.back_link a{
	display: inline-block;
	background-color: #888888;
	color: #fff;
	padding: .3em 2em;
	border: 1px solid #888888;
	transform: skewX(-15deg);
	text-decoration: none;
}
.back_link a span{
	transform: skewX(15deg);
	display: block;
}
.back_link a:hover{
	color: #888888;
	background-color: #fff;
}
.thanks_text{
	font-size: 1.3em;
	line-height: 1.7em;
}

/*------------------------------------------
タブレット・スマホ スタイル例
------------------------------------------*/
@media screen and (max-width:736px){
	.form_title{
		font-size: 1.3em;
	}
	.form dt{
		width: 100%;
		float: none;
		padding: 0 0 .3em;
		min-height: 0;
		line-height: 1.5em;
	}
	.form dd{
		padding: 0 0 1em;
		margin: 0 0 1em;
		border-bottom: 1px solid #BCBCBC;
		min-height: 2em;
		line-height: 1.5em;
	}
	.confirm_box .wide_dlc p.agreement{
		text-align: left;
		margin-top: 0;
	}
	.back_link{
		margin: 1em 15px;
	}
	.thanks_text{
		font-size: 1.1em;
	}
}



/*ボタン
-----------------------------*/
.btn{
	text-align: center;
}
.btn a{
	font-size: 1em;
	font-weight: normal;
}
.form_box .btn{
	margin-top: 0;
}
.btn button{
	display: inline-block;
	max-width: 100%;
	min-width: 500px;
	padding: .5em 3em;
	font-size: 1em;
	text-decoration: none;
	color: #333;
	background-image: url("../common/images/btn.svg");
	background-repeat: no-repeat;
	background-size: auto 10px;
	background-position: center right 15px;
	position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-15deg);
	border: none;
	background-color: transparent;
}
.btn button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
   	border: 1px solid #555;/* ボーダーの色と太さ */
}
/*
.btn_back a:hover{
	background-color: #000000;
}
*/

/*ボタン内spanの形状*/
.btn button span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
	    transform: skewX(15deg);
	display: block;
}

.btn button:hover span{
	color:#fff;
}

/*== 背景が流れる（左から右） */
.btn button::after {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#333;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.btn button:hover::after {
	transform-origin:left top;
	transform:scale(1, 1);
}

/*ボタン（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.btn{
		margin: 30px 15px 1em;
	}
	.btn button{
		font-size: 1.2em;
		min-width: 100%;
	}
}