/*
Theme Name:YumeHaru
*/
@font-face {
  font-family: "jiyu";
  src: url("JiyunoTsubasa.ttf") format("truetype");
}
*{
	margin:0;
	padding:0;
	text-decoration: none;
	list-style:none
}
a:link,a:link,a:visited {color:#fff;}
html{
	font-family: 'Noto Sans JP', sans-serif;
	background-color: #fcfeff;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%,#fff),
	linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
	background-size: 200px 200px;
	color:#777;
	width:100%;
}
body{
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
header{
	position:fixed;
	z-index:9999;
	top:0;
	left:0;
	width:100%;
	height:120px;
	background: linear-gradient(90deg, rgb(101, 132, 196), rgb(226, 156, 231));
}
#reason,#list,#qa,#form{
	padding-top: 85px;
}
#logo1{
	float:left;
	margin: 8px 20px;
	height:75px;
	width:auto;
}
#satei{
	background-color: #fff500;
	position: absolute;
	top:10px;
	right:15px;
	width:180px;
	height:60px;
	border-radius: 10px;
}
#satei p{
	font-weight:bold;
	text-align:center;
	padding-top:16px;
	color:#9c92cd;
	font-size:130%;
}
#hnav{
	width:100%;
	padding:0 15px;
	position: absolute;
	left:0px;
	bottom:5px;
	color:#fff;
}
#hnav li{
	float:left;
	font-size:115%;
	text-align:center;
	width:calc(25% - 1px);
	border-right:1px solid #fff;
}
.herobg{
	position:relative;
	margin-top:120px;
	width: 100%;
	height: 550px;
	background-image: url("img/topbg2-1white.jpg");
	background-blend-mode:lighten;
	background-position: 0 0;
	background-size: 4950px 550px;
	animation-name: herobg;
	animation-duration: 60s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	overflow:hidden;
}
h1{
	margin:60px 10px;
	font-size:6em;
	font-weight:bold;
	line-height:1.2em;
	height:300px;
	color:#fce;
	text-shadow: 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 5px 5px rgba(101, 132, 196, 0.25);
    transform: rotate(-4deg);
}
.herobg div h2{
	font-size:3em;
	font-weight:bold;
	position:absolute;
	right:10px;
	bottom:30px;
	color: #dbd;
	text-shadow: 2px 2px #fff, 5px 5px rgba(101, 132, 196, 0.25);
}
.herobg img{
	position:absolute;
	bottom:-100px;
	left:5%;
}
h4{
	font-size:3em;
	font-weight:bold;
	line-height:1.2em;
	color:#fce;
	text-shadow: 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 5px 5px rgba(101, 132, 196, 0.25);
	position: relative;
	padding: 0 .4em .1em;
	margin:30px 0;
}
h4:before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 70%;
  height: 25px;
  background-color: rgba(156, 146, 205, 0.4);
}
.rbox{
	width:100%;
	background-color:#f8ecd5;
	padding:25px;
	min-height:425px;
	margin-bottom:20px;
}
.box{
	width:100%;
}
.box-l{
	width:45%;
	float:left;
}
.box-l img{
	width:94%;
	margin:10px,auto;
}
.box-r{
	width:53%;
	float:left;
	padding:1%;
}
.box-txt{
	width:94%;
	font-size:24px;
	line-height:50px;
}
h5{
	font-family: 'jiyu', sans-serif;
	font-size:2em;
	font-weight:bold;
	color:#f32;
	text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
	margin-bottom:20px;
}
.small{
	width:94%;
	font-size:85%;
	line-height:20px;
}
@keyframes herobg {
  0% {background-position: 0 0;}
  100% {background-position: 4940px 0;}
}
.mw{
	width:1200px;
	margin:0 auto;
	overflow:hidden;
}
.middle{
	font-size:125%;
}
.big{
	font-size:150%;
}
.right{
	float:right;
	margin-right:10px;
}
select{
	margin:15px 0;
	padding-left:10px;
	width:30%;
	height:40px;
	border-radius:20px;
	border: 2px solid #9c92cd;
	color: #9c92cd;
	font-weight:bold;
	font-size:110%;
}
iframe{
	width:1184px;
	height:656px;
}
.kaitori ,.qa{
	background-color: #f0f5ff;
	border: 3px solid #9c92cd;
	padding:5px;
	overflow:scroll;
}
.kaitori{
	height:650px;
}
.card{
	width:19.25%;
	height:370px;
	margin:.35%;
	background-color: #fff;
	box-shadow: 0 0 2px #abd;
	text-align : center;
	border-radius: 10px;
	float:left;
}
.card h3{
	margin-top:10px;
	font-size:14px;
	font-weight:bold;
	color: #9c92cd;
	width:370px;
	height:45px;
	display:table-cell;
	text-align: center;
	vertical-align:middle;
}
.card img{
	width:75%;
	height:auto;
}
.midasi{
	width:90%;
	height:25px;
	color:#fff;
	font-weight:bold;
	background-color:#9c92cd;
	margin:0 auto;
}
.gaku{
	margin-right:15px;
	color:#f00;
	float:right;
	font-weight:bold;
	font-size:30px;
}
.qaf{
	font-family: 'Righteous', cursive;
	font-size:140%;
	margin:0 10px ;
}
.red{
	color:#f00;
}
.blue{
	color:#00f;
}
.exp{
	font-family: 'jiyu', sans-serif;
	color:#555;
	font-size:25px;
	line-height: 45px;
}
.red2{
	color:#f00;
	font-size:125%;
}
hr {
 	height: 1px;
 	background-color: #9c92cd;
 	border: none;
 	margin:7px 0;
}
footer{
	width:96vw;
	background: linear-gradient(90deg, rgb(101, 132, 196), rgb(226, 156, 231));
	color:#fff;
	font-weight:bold;
	padding:2vw;
}

table{
	width:80%;
	margin:0 auto;
}
input{
	width:95%;
}
.form-contact th,
.form-contact td {
  border-bottom: solid 1px #ccc;
}

.form-contact tr:last-of-type th,
.form-contact tr:last-of-type td {
  border: none;
}

.form-contact th {
  font-weight: normal;
  text-align: left;
  width: 25%;
}

.form-contact td {
  padding: 20px 20px;
  width: 75%;
}

/* ------ フォームスタイル ------- */
.form-contact {
	position: relative;
	border-radius: 10px;
	border: 4px solid rgba(156, 146, 205, 0.4);
	margin-bottom:20px;
}
.form-contact input,
.form-contact textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font: 15px/24px sans-serif;
  margin: 8px 0;
  outline: none;
  padding: 10px 20px;
  transition: 0.3s;
}
.form-contact textarea {
  width: 100%;
}
.form-contact input:focus,
.form-contact textarea:focus {
  border: 1px solid #0086d1;
}
.text-required {
  background: #9c92cd;
  border-radius: 3px;
  color: #fff;
  display: inline;
  font-size: 1.2rem;
  margin-right: 1rem;
  padding: 2px 7px 4px;
  position: relative;
  top: -2px;
  vertical-align: middle;
}
.form-contact__btn {
  display: flex;
  justify-content: center;
  margin:20px;
}
.form-contact__btn input[type="submit"] {
  background-color: #9c92cd;
  border: none;
  color: #fff;
  font-weight:bold;
  font-size: 1.8rem;
  letter-spacing: 0.15rem;
  padding: 20px 25px;
  width: 250px;
}

.form-contact__btn input[type="submit"]:hover {
  opacity: 0.8;
}

#btn ,nav{
  display: none;
}

input::placeholder {
    color: #a9a9a9; /* 薄いグレー。好みに合わせて #ccc などに調整 */
    opacity: 1;    /* Firefox対策 */
}
@media screen and (max-width: 1199px) {
.mw{
	width:100vw;
}
h1{
	font-size:7.5vw;
	line-height:10vw;
	margin:5vw 0 0 6vw;
}
.herobg div h2{
	font-size:4.5vw;
}
.herobg img{
	bottom:calc((750px - 100vw)*0.222);
	left:5vw;
}
h4{
	font-size:4vw;
	margin:4vw;
}
h4:before {
	height:2.5vw;
}
h5{
	font-size:4vw;
}
.exp{
	font-size:2.5vw;
	line-height:4.5vw;
	width:92vw;
	margin:0 auto;
}
.rbox{
	width:92vw;
	padding:2vw;
	margin:0 auto 5vw;
	min-height:36vw;
}
.box-txt{
	width:103%;
	font-size:2.5vw;
	line-height:3.5vw;
}
.small{
	width:103%;
	font-size:2vw;
	line-height:3vw;
}
.small2{
	width:94%;
	font-size:1.5vw;
	line-height:2vw;
	margin:0 auto;
}
#reason{
	width:96vw;
	margin:0 auto;
}
select{
	margin-left:4vw;
}
.kaitori,.qa,form{
	width:96vw;
	margin:0 auto;
}
.qa p{
	font-size:1.95vw;
}
table{
	width:90%;
}
.form-contact th {
  width: 35%;
	font-size:2vw;
}

.form-contact td {
  padding: 20px 0;
  width: 65%;
}
.card{
	width:24%;
	height:calc(35vw + 55px);
	margin:0.5%;
}
.gaku{
	font-size:4vw;
}
}
@media screen and (max-width: 750px) {
h1{
	text-shadow: 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 4px 4px rgba(101, 132, 196, 0.15);
	margin-top:40px;
}
.herobg div h2{
	text-shadow: 1px 1px #fff, 2px 2px rgba(101, 132, 196, 0.25);
}
.herobg img{
	width:140vw;
	bottom:0;
	left:-12vw;
}

.card h3{
	font-size:3.2vw;
	width:100%;
	line-height:4vw;
}
h4{
	font-size:5.1vw;
	margin:4vw;
	text-shadow: 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 1px 1px 1px #6584c4, -1px 1px 1px #6584c4, 1px -1px 1px #6584c4, -1px -1px 1px #6584c4, 3px 3px rgba(101, 132, 196, 0.25);
}
h4:before {
	height:3.3vw;
	width: 100%;
}
h5{
	font-size:4.35vw;
	margin-bottom:3vw;
}
#logo1{
	margin:15px;
	height:60px;
}
.herobg{
	margin-top:90px;
}

table{
	padding-top:30px;
}
.form-contact th {
	font-size:5vw;
}
.form-contact th,
.form-contact td {
    border: none;
    display: block;
    padding: 0;
    width: 100%;
}
.form-contact tr {
    display: block;
    margin-bottom: 20px;
}
.form-contact input,
.form-contact textarea {
    box-sizing: border-box;
    width: 100%;
}
.checkbox-inquiry .wpcf7-list-item {
    display: block;
}
.form-contact input[type="checkbox"] {
    float: left;
    margin-right: 10px;
    width: auto;
  }
.wpcf7-checkbox > .wpcf7-list-item {
    display: block;
    margin-left: 0;
}
.wpcf7-list-item label {
    display: block;
    line-height: 1.7vw;
    overflow: hidden;
}
.wpcf7-checkbox {
    display: block;
    margin-top: 20px;
}
.rbox{
	width:90vw;
	margin:0 auto 5vw;
	min-height:70vw;
}
.box-l{
	width:100%;
}
.box-l img{
	width:60%;
	margin:2% 19%;
}
.box-r{
	width:100%;
}
.box-txt{
	width:100%;
	font-size:3vw;
	line-height:3.5vw;
}
.small{
	width:100%;
	font-size:1.85vw;
	line-height:3vw;
}
.small2{
	line-height:3vw;
	margin-top:1vw;
	font-size:2.2vw;
}
.exp{
	font-size:3.4vw;
	line-height:7vw;
}
.qa p{
	font-size:2.6vw;
}
.kaitori,.qa,form{
	width:92vw;
	margin:0 auto;
}
.card{
	width:32.25%;
	height:calc(45vw + 60px);
	margin:0.45%;
}
.gaku{
	margin-right:2vw;
	font-size:4.5vw;
}
header{
	height:95px;
}
#hnav{
	display: none;
}
#btn {
	position: fixed;
	top: 22px;
	right: 15px;
	width: 44px;
	height: 44px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	cursor: pointer;
}
#btn span {
	display: block;
	background-color: #fff;
	width: 36px;
	height: 3px;
	transition: all 0.5s ease;
}
nav {
	position:absolute;
	width:60vw;
	background-color:rgba(151,142,194,0.75);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
	transition: all 0.5s ease;
	top: 70px;
	right:-60vw;
}
nav.on {
	right:0;
}
nav a {
	margin: 15px auto;
	text-shadow: 1px 1px 1px #978ec2, -1px 1px 1px #978ec2, 1px -1px 1px #978ec2, -1px -1px 1px #978ec2, 1px 1px 1px #978ec2, -1px 1px 1px #978ec2, 1px -1px 1px #978ec2, -1px -1px 1px;
	font-size:6vw;
}
#btn.on span {
	background-color: #fff;
}
#btn.on span:nth-of-type(1) {
	transform: translateY(11px) rotate(45deg);
}
#btn.on span:nth-of-type(2) {
	transform: scale(0);
}
#btn.on span:nth-of-type(3) {
	transform: translateY(-12px) rotate(-45deg);
}
}