@charset "UTF-8";

/* CSS Document */
/* ----------------------------------------------------------------------------------------------------
  settings
* --------------------------------------------------------------------------------------------------*/
body {
	text-justify:inter-ideograph;
	-webkit-text-size-adjust:100%;
 	font-family: osaka, 游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro',  メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
	color:#222222;
	font-size:13px;
	font-weight:400;
	line-height:1;
	letter-spacing: 2px;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.squadaone{
	font-family: 'Squada One', cursive;
}

.mincho{
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
.gothic{
	font-family: osaka, 游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro',  メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
}

a {
	color: inherit;
	text-decoration:none;
}

img {
	width:100%;
	height:auto;
}

.italic{
	font-style: italic;
}

.inview{
	opacity: 0;
}

@media screen and (min-width: 769px) {
	.sp_view {
		display:none ;
	}
	
	.pc_view {
		display:block ;
	}
}

@media screen and (max-width: 900px) {
	/*
	html {
		font-size:calc(100vw / 0.768);
	}
  body {
  	font-size:0.024rem;
  }
  */
	.sp_view {
		display:block ;
	}
	
	.pc_view {
		display:none ;
	}
}



@media print,screen and (min-width:901px) {
	a:hover,a:hover img:not('.not-hover') {
		opacity:.85;
	}
}


/*---------------------------------------
 * LinkBtn
---------------------------------------*/ 

.frame-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
}
.frame-btn::before,
.frame-btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.frame-btn,
.frame-btn::before,
.frame-btn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


/*---------------------------------------
 * MenuHere
---------------------------------------*/ 

@media print,screen and (min-width:901px) {

	.menu-content .navigation a .en{
		position: relative;
	}
	.top .menu-content .navigation a .home::after{
		display: block;
		content:"";
		width: 120%;
		height: 4px;
		background: #FFFFFF;
		position: absolute;
		top:50%;
		left:-10%;
		margin-top: -9px;
	}

}

@media print,screen and (max-width:900px) {
	
	.menu-content .navigation a .en{
		position: relative;
	}
	.top .menu-content .navigation a .home::after{
		display: block;
		content:"";
		width: calc(100% + 40px);
		height: 4px;
		background: #FFFFFF;
		position: absolute;
		top:50%;
		left:-20px;
		margin-top: -2px;
	}
	
}


/*---------------------------------------
 * MoreLink
---------------------------------------*/ 

@media print,screen and (min-width:901px) {
	
	.more-link a{
		display: table;
		width: auto;
	}
	.more-link a div{
		display: table-cell;
		vertical-align: middle;
	}
	.more-link a .icon{
		width: 56px;
		height: 56px;
		background: url(/common/img/arrow_right_white.svg) 50% no-repeat #222222;
		background-size: 20px;
		border-radius: 50%;
		border: 2px solid #222222;
	}
	.more-link a:hover .icon{
		background: url(/common/img/arrow_right_blk.svg) 50% no-repeat #FFFFFF;
		background-size: 20px;
		border-radius: 50%;
	}
	.more-link a .word{
		padding-left: 10px;
		width: inherit;
	}
	.more-link span{
		display: block;
		font-size: 22px;
	}
	.more-link span.ja{
		font-size: 12px;
		color: #999999;
		margin-top: 5px;
	}
	
}

@media print,screen and (max-width:900px) {
	
	.more-link a{
		display: table;
		width: auto;
	}
	.more-link a div{
		display: table-cell;
		vertical-align: middle;
	}
	.more-link a .icon{
		width: 40px;
		height: 40px;
		background: url(/common/img/arrow_right_white.svg) 50% no-repeat #222222;
		background-size: 16px;
		border-radius: 50%;
		border: 2px solid #222222;
	}
	/*
	.more-link a:hover .icon{
		background: url(/common/img/arrow_right_blk.svg) 50% no-repeat #FFFFFF;
		background-size: 18px;
		border-radius: 50%;
	}
	*/
	.more-link a .word{
		padding-left: 10px;
		width: inherit;
	}
	.more-link span{
		display: block;
		font-size: 18px;
	}
	.more-link span.ja{
		font-size: 11px;
		color: #999999;
		margin-top: 5px;
	}
	
}



/*---------------------------------------
 * FormStyle
---------------------------------------*/ 

@media print,screen and (min-width:901px) {	  
	
	.form-block .midashi{
		font-size: 16px;
		margin: 60px 0 20px;
	}
	
	.form-block dl dt{
		padding: 35px 0 25px;
		line-height: 1.7;
	}
	.form-block dl dd{
	}
	.form-block dl dd .mfp_rows{
		border-top: 1px solid #CCCCCC;
		padding: 30px 0;
		margin-left: 9%;
	}
	.width-short{
		width: 100%;
		max-width: 260px;
		box-sizing: border-box;
	}
	.width-long{
		width: 100%;
		max-width: 550px;
		box-sizing: border-box;
	}
	.width-max{
		width: 100% !important;
		box-sizing: border-box;	
	}
	
	
	/* SelectBox
	---------------------------------------*/ 

	.selectform .wrap{
		display: inline-block;
	}
	.selectform select{
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    padding: 0;
	    margin: 0;
	    width: 260px;
	    min-height: 15px;
	    background: transparent;
	    position: relative;
	    z-index: 1;
	    padding: 7px;
	    border: 1px solid #CCCCCC;
	    border-radius: 0;
	    box-sizing: border-box;
	}
	.selectform　select::-ms-expand {
	    display: none;
	}
	.selectform .selectWrap{
	    position: relative;
	    display: inline-block;
	    width: 260px;
	    /*height: 20px;*/
	    background: transparent;
	}
	.selectform .selectWrap.prefectures{
		width: 270px;
	}
	.selectform .selectWrap.prefectures select{
		width: 270px;
	}
	/*
	.selectform .selectWrap::before{
	    content: '';
	    position: absolute;
	    z-index: 1;
	    top: 0;
	    right: 0;
	    background: #FFF;
	    height: 100%;
	    width: 30px;
	}
	*/
	.selectform .selectWrap::after{
	    content: '';
	    position: absolute;
	    z-index: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto 0;
	    right: 9px;
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 5px 5px 0 5px;
	    border-color: #333 transparent transparent transparent; 
	}
	
	
	/* Btn
	---------------------------------------*/ 
	
	.mfp_buttons{
		margin-top: 60px;
	}
	
	.mfp_buttons .submit_btn{
		border: 1px solid #222222;
		background: #222222;
		text-shadow: none ;
		color: #FFFFFF;
		text-align: center;
		letter-spacing: 2px;
		width: 260px;
		padding: 15px 0;
		width: 40%;
		max-width: 480px;
	}
	.mfp_buttons .submit_btn:hover{
		background: #FFFFFF;
		color: #222222;
	}
	.mfp_buttons .reset_btn{
		border: 1px solid #222222;
		background: #FFFFFF;
		text-shadow: none ;
		color: #222222;
		text-align: center;
		letter-spacing: 2px;
		width: 260px;
		padding: 15px 0;
		width: 40%;
		max-width: 480px;
	}
	.mfp_buttons .reset_btn:hover{
		background: #222222;
		color: #FFFFFF;
	}
	.mfp_buttons .en{
		font-size: 18px;
		display: block; 
	}

	.mfp_buttons .ja{
		font-size: 11px;
		display: block; 
		margin: 0 !important;
	}
	
}

@media print,screen and (max-width:900px) {

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea{
		font-size : 16px;
		border : 1px solid #ccc;
		-webkit-border-radius : 0;
		-webkit-appearance : none;
		-webkit-tap-highlight-color : rgba(0,0,0,0);
	}
	.form-block dl{
		border-top: 1px solid #CCCCCC;
		padding: 20px 10px;
		font-size: 16px;
	}
	form#mailformpro dl dt{
		border:none !important;
		font-size: 15px !important;
		margin-bottom: 10px !important;
		line-height: 1.7;
	}
	label{
		font-size: 16px;
	}
	.width-short{
		width: 100%;
		
		box-sizing: border-box;
	}
	.width-long{
		width: 100%;
		
		box-sizing: border-box;
	}
	.width-max{
		width: 100% !important;
		box-sizing: border-box;	
	}
	
	
	/* SelectBox
	---------------------------------------*/ 

	.selectform .wrap{
		display: inline-block;
		width: 100%;
	}
	.selectform select{
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    padding: 0;
	    margin: 0;
	    width: 100%;
	    min-height: 15px;
	    background: transparent;
	    position: relative;
	    z-index: 1;
	    padding: 7px;
	    border: 1px solid #CCCCCC;
	    border-radius: 0;
	    box-sizing: border-box;
	    font-size: 16px;
	}
	.selectform　select::-ms-expand {
	    display: none;
	}
	.selectform .selectWrap{
	    position: relative;
	    display: inline-block;
	    width: 100%;
	    /*height: 20px;*/
	    background: transparent;
	}
	.selectform .selectWrap.prefectures{
		  width: 100%;
	}
	.selectform .selectWrap.prefectures select{
		  width: 100%;
	}
	/*
	.selectform .selectWrap::before{
	    content: '';
	    position: absolute;
	    z-index: 1;
	    top: 0;
	    right: 0;
	    background: #FFF;
	    height: 100%;
	    width: 30px;
	}
	*/
	.selectform .selectWrap::after{
	    content: '';
	    position: absolute;
	    z-index: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto 0;
	    right: 9px;
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 5px 5px 0 5px;
	    border-color: #333 transparent transparent transparent; 
	}
	
	
	/* Btn
	---------------------------------------*/ 
	
	.mfp_buttons{
		margin-top: 30px;
		padding: 0 10px;
	}
	.mfp_buttons .submit_btn{
		border: 1px solid #222222;
		background: #222222;
		text-shadow: none ;
		color: #FFFFFF;
		text-align: center;
		letter-spacing: 2px;
		padding: 15px 0;
		width: 100%;
	}
	.mfp_buttons .reset_btn{
		border: 1px solid #222222;
		background: #FFFFFF;
		text-shadow: none ;
		color: #222222;
		text-align: center;
		letter-spacing: 2px;
		padding: 15px 0;
		width: 100%;	
	}
	.mfp_buttons .en{
		font-size: 18px;
		display: block; 
	}
	.mfp_buttons .ja{
		font-size: 11px;
		display: block; 
		margin: 0 !important;
	}
	
}