/*
Theme Name: 明治安田生命様カレンダーカレンダー申込サイト
Theme URI: https://myl-calendar.com/
Version: 1.0
Author: yoshioka-insatsu
Author URI: https://myl-calendar.com/
*/


@charset "UTF-8";

/* ==========================================================================
   base
============================================================================= */

body {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*iPhone font*/
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #000000;
}

@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ, Meiryo, ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif;
	}
}

.fontMincho { 	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

p { background-image:url(""); }

a:link{ color: #000000; text-decoration: none; }
a:visited{ color: #000000; text-decoration: none; }
a:active{ color: #000000; text-decoration: none; }
a:hover { color: #cc6600; text-decoration: none; }

a {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    outline : none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);

	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;

	opacity: 0.8;
}

img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a:hover img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);

	opacity: 0.8;
}

svg,
a:hover svg {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a[href^="tel:"] { cursor: default; }

ul { list-style-type: none; }

address { font-style: normal; }


/* ==========================================================================
   clearfix
============================================================================= */

.cf:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.cf {
	min-height: 1px;
}

* html .cf {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ==========================================================================
   common
============================================================================= */
.txtLt {text-align: left!important;}
.txtRt {text-align: right!important;}
.txtCt {text-align: center!important;}
.txtBold {font-weight: bold!important;}
.txtNormal {font-weight: normal!important;}
.fontSmall {font-size: 0.7rem!important;}
.fontLarge {font-size: 1.4rem!important;}
.font90per {font-size: 90%!important;}
.font105per {font-size: 105%!important;}
.font110per {font-size: 110%!important;}
.font120per {font-size: 120%!important;}

.flRt { float: right!important;}
.flLt { float: left!important;}
.txtRt { text-align: right!important;}
.txtLt { text-align: left!important;}
.txtCt { text-align: center!important;}

.lh2 { line-height: 2em;!important }
.pt0 {padding-top: 0!important;}
.pt1 {padding-top: 1rem!important;}
.pt2 {padding-top: 2rem!important;}
.pb0 {padding-bottom: 0!important;}
.pb1 {padding-bottom: 1rem!important;}
.pb2 {padding-bottom: 2rem!important;}
.pb3 {padding-bottom: 3rem!important;}
.pb4 {padding-bottom: 4rem!important;}
.pb5 {padding-bottom: 5rem!important;}
.mt0 {margin-top: 0!important;}
.mt05 {margin-top: 0.5em!important;}
.mt1 {margin-top: 1rem!important;}
.mt2 {margin-top: 2rem!important;}
.mt3 {margin-top: 3rem!important;}
.mt5 {margin-top: 4rem!important;}
.mt5 {margin-top: 5rem!important;}
.mt6 {margin-top: 5rem!important;}
.mb0 {margin-bottom: 0!important;}
.mb05 {margin-bottom: 0.5rem!important;}
.mb1 {margin-bottom: 1rem!important;}
.mb2 {margin-bottom: 2rem!important;}
.mb3 {margin-bottom: 3rem!important;}
.mb4 {margin-bottom: 4rem!important;}
.mb5 {margin-bottom: 5rem!important;}
.mb6 {margin-bottom: 6rem!important;}
.ml1 {margin-left: 1rem!important;}
.ml2 {margin-left: 2rem!important;}
.ml3 {margin-left: 3rem!important;}
.mr1 {margin-right: 1rem!important;}
.mr2 {margin-right: 2rem!important;}
.mr3 {margin-right: 3rem!important;}

.dpB { display: block!important;; }

/*レスポンシブ用マージン*/
.martS { margin-top: 2rem; }
.martM { margin-top: 3rem; }
.martL { margin-top: 4rem; }

.marbS { margin-bottom: 2rem; }
.marbM { margin-bottom: 3rem; }
.marbL { margin-bottom: 4rem; }

@media only screen and (min-width: 768px){
	.martS { margin-top: 3rem; }
	.martM { margin-top: 4rem; }
	.martL { margin-top: 5rem; }

	.marbS { margin-bottom: 3rem; }
	.marbM { margin-bottom: 4rem; }
	.marbL { margin-bottom: 5rem; }
}

@media only screen and (min-width: 1000px){
	.martS { margin-top: 4rem; }
	.martM { margin-top: 5rem; }
	.martL { margin-top: 6rem; }

	.marbS { margin-bottom: 4rem; }
	.marbM { margin-bottom: 5rem; }
	.marbL { margin-bottom: 6rem; }
}


@media only screen and (min-width: 768px){
	br.mbbr {/*スマホのみ改行*/
		display:none!important;
	}
}

br.tbbr {
	display: none;
}

@media only screen and (min-width: 768px){
	br.tbbr {/*タブレット以上のみ改行*/
		display: inline;
	}
}

br.dtbr {
	display: none;
}

@media only screen and (min-width: 1000px){
	br.dtbr {/*PC以上のみ改行*/
		display: inline;
	}
}

/*モバイルのみ消す（インライン）*/
.mbNone {
	display: none;
}

@media only screen and (min-width: 768px){
	.mbNone {
		display: inline;
	}
}


select, textarea, [type="text"], [type="password"], [type="datetime"], [type="datetime-local"], [type="date"], [type="month"], [type="time"], [type="week"], [type="number"], [type="email"], [type="url"], [type="search"], [type="tel"], [type="color"], .uneditable-input {
	display: inline-block;
	padding: 0.5em 0.5em;
	width: 50%;
	/*-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;*/
	vertical-align: middle;
	font-size: 90%;

    border: none;
    background-color: #fff;

}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 25px;
}

input[type="reset"]:focus,
input[type="submit"]:focus {
	outline: 0;
}

/*youtube貼り付け用*/
.movieBox {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}
 
.movieBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.paling {
	padding: 1em;
	border: 1px solid #000000;
}


/* ==========================================================================
   base
============================================================================= */

body {

}

img,
svg {
	max-width: 100%;
	height: auto;
}


/*---------- fixTopBtn ----------*/
a.fixTopBtn {
	z-index: 9999;
	opacity: 0;
	position: fixed;
	bottom: 0;
	right: 15px;
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	cursor: pointer;
}

a.fixTopBtn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	font-family: "Font Awesome 5 Free";
	font-size: 1.5rem;
	font-weight: 700;
	content: "\f062";
	color: #ffffff;
}

a.fixTopBtn span {
	display: none;
}

@media screen and (min-width: 768px) {
	a.fixTopBtn {
		width: 3rem;
		height: 3rem;
	}

	a.fixTopBtn::before {
		font-size: 2rem;
	}
}

/*======= header =======*/
header {
	position: relative;
	height: auto;

}

header .headerInner {

}


/*======= footer =======*/
footer {

}

footer .footerInner {

}


/*======= contentCommon =======*/
@media screen and (min-width: 900px) {
	.w900 {
		max-width: 900px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 1000px) {
	.w1000 {
		max-width: 1000px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

@media screen and (min-width: 1200px) {
	.w1200 {
		max-width: 1200px!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
}

.flexContainer {
	display: -webkit-flex;
	display: flex;

	-webkit-flex-direction: row;
	flex-direction:         row;

	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;

	-webkit-justify-content: flex-start;
	justify-content:         flex-start;/*space-around*/
}






.formArea {
	margin: 2rem auto 5rem auto;
}

.formArea .sectionInner {
	margin: 0 1rem;
}

.formArea .sectionInner .tempImg {
	text-align: center;
	margin-bottom: 5rem;
}

.formArea .formWrap {
	width: 100%;
	/*font-size: 1.4rem;*/
	margin: 3rem auto 2rem auto;
}

.formArea .title h1 {
	font-size: 150%;
	margin-bottom: 2.5em;
}

.contactSup {
	font-size: 1.15rem;
	font-weight: normal;
	text-align: center;
	margin: 5rem auto 3rem auto;
}

.inputField {
	margin-bottom: 2rem;
	width: 100%;
	display: inline-block;
}

.inputField > label {
	display: block;
	margin-bottom: 0.3em;
	font-size: 1.05rem;
	font-weight: bold;
	text-align: left;
}

.inputField > label span {
	display: inline-block;
	vertical-align: middle;
}

.inputField > label .key {
	font-size: 0.8rem;
	color: #ff0000;
	margin-left: 0.1rem;
}

.inputField input,
.inputField textarea,
.inputField select {
	font-weight: normal;
}

.inputField .inputBox p {
	display: inline;
	vertical-align: middle;
}

.inputField .inputBox input {
	width: 100%;
	border: 1px solid #000000;
}

.inputField .inputBox input[type="file"] {
	border: none;
}

.inputField .inputBox.boxS input {
	width: 50%;
}


.inputField .inputBox select {
	width: 100%;
	border: 1px solid #000000;
}

.inputField .inputBox .selectWrap{
	width: 100%;
	position: relative;
	display: inline-block;
}

.inputField .inputBox .selectWrap::after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-bottom: solid 2px #b4b3b3;
	border-right: solid 2px #b4b3b3;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -4px;
}

.inputField .inputBox .selectWrap select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	background: transparent;
	position: relative;
	z-index: 1;
	padding-right: 40px;
}

.inputField .inputBox .selectWrap select::-ms-expand {
	  display: none;
}

.inputBox.radiobtn > div {
	display: inline-block;
	width: auto;
	line-height: 1;
	/*max-width: 400px;:/
	/*border:1px solid #dddddd;
	border-radius: 0.25em;
	box-shadow:1px 1px 3px 1px #d1d1d1;
	padding: 0.25em 0.5em;*/
	margin-bottom:0.5em;
	margin-right: 1.75rem;
}

.inputBox.radiobtn input {
	width: 1rem;
	height: 1rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}

.inputBox.radiobtn > div label {
	display: inline-block;
	font-weight: bold;
	vertical-align: middle;
	margin-bottom: 0;
} 

.inputBox.checkboxbtn > div {
	display: inline-block;
	width: auto;
	line-height: 1;
	/*max-width: 400px;:/
	/*border:1px solid #dddddd;
	border-radius: 0.25em;
	box-shadow:1px 1px 3px 1px #d1d1d1;
	padding: 0.25em 0.5em;*/
	margin-bottom:0.5em;
	margin-right: 1.75rem;
}

.inputBox.checkboxbtn input {
	width: 1rem;
	height: 1rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}

.inputBox.checkboxbtn > div label {
	display: inline-block;
	font-weight: bold;
	vertical-align: middle;
	margin-bottom: 0;
}

.inputField .textareaBox textarea {
	width: 100%;
	height: 8em;
	border: 1px solid #000000;
	color: #000000;
}

.inputBox.chkBtn input {
	width: 1rem;
	height: 1rem;
	display: inline;
	vertical-align: middle;
	margin-right: 0.5em;
}

ul.submit {
	text-align: center;
	list-style-type: none;
	font-size: 1.1rem;
	font-weight: bold;
}

ul.submit li {
	position: relative;
	display: inline-block;
	margin: 2rem 0 2rem 0;
}

ul.submit li input[type="submit"] {

}

ul.submit li input[type="reset"] {

}

ul.submit li input {
	cursor: pointer;
	color: #ffffff;
	border: 1px solid #00ff66;
	border-radius: 0;
	padding: 0.75em 1.25em;
	line-height: 1em;
	letter-spacing: 0.2em;
	background-color: #00cc66;

	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

ul.submit li input:hover {
	cursor: pointer;
	color: #ffffff;
	border: 1px solid #7FB5E4;
	background-color: #7FB5E4;
	
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}



@media screen and (min-width: 768px) {

}

@media screen and (min-width: 1000px) {
	.contact .sectionInner {
		width: 100%;
	}

	.inputField {
		width: 850px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		letter-spacing: -.4em;
	}

	.inputField label,
	.inputField .inputBox,
	.inputField .textareaBox {
		letter-spacing: normal;
	}

	.inputField > label {
		display: inline-block;
		width: 250px;
		vertical-align: middle;
		margin-bottom: 0;
		font-size: 1.1rem;
		text-align: left;
		padding-right: 1.5em;
	}

	.inputField label.vt {
		vertical-align: top;
	}

	.inputField.itemText label {
		vertical-align: top;
	}

	.inputField .inputBox,
	.inputField .textareaBox {
		display: inline-block;
		vertical-align: middle;
		width: 580px;
	}
}

.thanks {
	text-align: center;
	color: #ffffff;
}

.thanks .sectionInner .textBox {
	padding: 3rem 0;
}


.wpcf7-response-output {
	font-size: 160%!important;
	font-weight: bold!important;
	padding: 0.5em 1em!important;
	margin-top: 1rem!important;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
	font-weight: bold!important;
}

.wpcf7-not-valid {
	background: #ffe1e1!important;
}

/* 確認画面のフィールド背景色や枠線 */
.wpcf7c-conf,
.wpcf7c-conf:focus,
.wpcf7c-conf > option,
.wpcf7c-conf > option:focus {
	background: #ffcc99!important;
	border: 1px solid #ff9933!important;
	outline: #ff9933!important;
}

/* 戻るボタン */
ul.submit li input.wpcf7-back {
	color: #ffffff;
	border: 1px solid #303030;
	background-color: #666666;
}

ul.submit li input.wpcf7-back:hover {
	color: #ffffff;
	border: 1px solid #303030;
	background-color: #909090;
}

/* フォーム確認画面 */
.infoMessage {
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	margin: 2rem 0 2rem 0;
}