@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Zen_Kaku_Gothic_New;
    color: #333;
    font-size: 1.2vw;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #608ca6;
}

a:hover {
    color: #a0cde7;
}

@font-face {
    font-family: Zen_Kaku_Gothic_New;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

/* 
    color: #608ca6;
    color: #A0CDE7;
    color: #EEFBF9;
    黄色 color: #FFD45E;
    pタグ 1.2vw
    h2 2vw
    h3 1.6vw基準
*/


header {
    width: 100%;
    display: flex;
    background-color: #a0cde7;
}

h1 {
    width: 15%;
    margin-top: 1%;
    margin-left: 5%;
}

h1 a img {
    display: block;
    width: 100%;
}

nav {
    width: 40%;
    margin-left: auto;
    margin-right: 5%;
}

nav .pcmenu {
    display: flex;
    background-color: #fff;
    border-bottom-left-radius: 2.5vw;
    padding: 1% 2%;
}

nav .pcmenu li {
    width: 25%;
    border-left: 3px dashed #A0CDE7;
    /* 時間あったら疑似要素にかける */
}

nav .pcmenu li:first-child {
    border-left: none;
}

nav .pcmenu li a {
    display: block;
    text-align: center;
    line-height: 2;
    font-size: 1.2vw;
    transition: 0.5s;
}

nav .pcmenu li a:hover {
    transition: 0.5s;
    color: #a0cde7;
}

nav .pcmenu li a:hover img {
    opacity: 0.5;
    transition: 0.5s;
}

nav .pcmenu li a img {
    display: block;
    width: 2.5vw;
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s;
}


/*ナビメニューのスタイルを指定*/
nav .NavMenu {
	position: fixed; /*表示位置を固定*/
	z-index: 100; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	right: 0; /*表示位置を指定*/
    margin-left: auto;
	width: 45%;
    height: 100%;
    overflow-y: auto;
	transform: translateX(100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: 0.6s; /*アニメーションの時間を指定*/
    background-color: #fff;
}

nav .NavMenu::-webkit-scrollbar {
    display: none;
}

nav .NavMenu-flex {
    display: flex;
    width: 65%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

nav .NavMenu-flex:first-of-type {
    display: block;
    margin-bottom: 5%;
}

nav .NavMenu .NavMenu-flex li {
    font-size: 1.4vw;
}

nav .NavMenu .NavMenu-flex li a {
    color: #608ca6;
}

nav .NavMenu .NavMenu-flex li ul a {
    display: block;
}

nav .NavMenu .NavMenu-flex li ul li{
    width: 100%;
    margin-left: 5%;
	font-size: 1.2vw;
}

nav .NavMenu .NavMenu-flex li ul li a {
	display: block; /*クリックできる領域を広げる*/
	color: #333;
    text-decoration: none;
    line-height: 2;
}

nav .NavMenu .NavMenu-flex li ul li a:hover {
    color: #A0CDE7;
    transition:0.5s;
}

.NavMenu-title {
    margin-bottom: 5%;
}

nav .NavMenu-flex:last-of-type {
    margin-bottom: 10%;
}

nav .NavMenu-flex:last-of-type .NavMenu-title {
    width: 48%;
}

.NavMenu-title::before {
    content: "\f005";
    font: var(--fa-font-solid);
    font-size: 1.2vw;
    color: #A0CDE7;
}


/*トグルボタンが押されたときに付与するクラス*/
nav .NavMenu.active{
	transform: translateX(0%);/*上から出したい場合は、transform: translateYを使う。*/
}


/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;/* bodyに対しての絶対位置指定 */
    right: 0;
	top: 0;
	width: 3vw;
	height: 4vw;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 100;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 8vw;
    height: 8vw;
    background-image: url(../images/top-right.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.Toggle span {
	display: block;
	position: absolute;
    top: 0;
	right: 1.5vw;
	width: 3vw;
	height: 3px;
    background-color: #fff;
	transition: .35s ease-in-out;/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
	top: 1.5vw;
}

.Toggle span:nth-child(2) {
	top: 2.5vw;
}

.Toggle span:nth-child(3) {
	top: 3.5vw;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 2vw;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2) {
    background-color: transparent;
}
.Toggle.active span:nth-child(3) {
    top: 2vw;
    transform: rotate(45deg);
}


main {
    width: 90%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

main h2 {
    color: #608ca6;
    font-size: 2vw;
}

main section {
    margin-top: 5%;
}

main section h3 {
    font-size: 1.6vw;
}

main section details {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: justify;
}

main section summary {
    display: block;
    padding: 2% 1%;
    cursor: pointer;
    border: 1px solid #a0cde7;
    border-radius: 1vw;
    font-weight: bold;
    font-size: 1.2vw;
    transition: 0.2s;
}

main section summary:hover {
    color: #608ca6;
    transition: 0.2s;
}

main section summary::before {
    content: "Q";
    margin-right: 1%;
    padding: 0.5% 1%;
    border-radius: 50%;
    background-color: #608ca6;
    color: #fff;
}

main section details[open] {
    border: 1px solid #A0CDE7;
    border-radius: 1vw;
}

main section details[open] summary {
    border-color: transparent;
}

main section details[open] .answer {
    padding: 2% 10%;
    background-color: #EEFBF9;
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
}

main section details[open] .answer p {
    line-height: 1.7;
}


main section .attention-wrap {
    display: flex;
    margin-top: 2%;
}

main section .attention {
    padding: 2% 4%;
    background-color: #EEFBF9;
    border-radius: 1vw;
    text-align: justify;
}

main section .attention p {
    margin-bottom: 2%;
}

main section .attention p:last-of-type {
    margin-bottom: 0;
}

main section .attention:nth-of-type(1) {
    width: 50%;
}

main section .attention:nth-of-type(2) {
    width: 32%;
    margin-left: 2%;
}

main section .attention .tel {
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
    color: #608ca6;
    letter-spacing: 0.1em;
}

main section .attention .tel span {
    display: block;
    font-size: 1vw;
    margin-left: 2%;
}

main section form {
    margin-top: 5%;
    margin-bottom: 10%;
}

main section .form {
    display: flex;
    align-items: center;
    margin-top: 4%;
}

main section .form:first-of-type {
    margin-top: 0;
}

main section .form:last-of-type {
    align-items: flex-start;
}

main section .form .form-text {
    width: 20%;
    margin-left: 10%;
    font-size: 1.4vw;
}

main section .form .form-text::after {
    content: "必須";
    margin-left: 5%;
    padding: 1% 3%;
    background-color: #E83015;
    border-radius: 1vw;
    font-size: 0.9vw;
    font-weight: bold;
    color: #fff;
}

main section .form .input-area {
    width: 70%;
}

main section .form .input-area input[type="text"],
main section .form .input-area input[type="tel"],
main section .form .input-area input[type="email"] {
    width: 60%;
    height: 2vw;
}

main section .form .input-area input {
    border: 1px solid #ccc;
}

main section .form .input-area input:hover {
    background-color: #EEFBF9;
    border: 1px solid #608ca6;
}

main section .form .input-area input[type="radio"] {
    margin-right: 0.5%;
}

main section .form .input-area label {
    margin-left: 2%;
}

main section .form .input-area label:first-of-type {
    margin-left: 0;
}

main section .form .input-area textarea {
    width: 60%;
    height: 10vw;
    border: 1px solid #ccc;
}

main section .form .input-area textarea:hover {
    background-color: #EEFBF9;
    border: 1px solid #608ca6;
}

main section .form .input-area input[type="text"]:focus,
main section .form .input-area input[type="tel"]:focus,
main section .form .input-area input[type="email"]:focus,
main section .form .input-area textarea:focus {
    outline: none;
    background-color: #EEFBF9;
    border: 1px solid #608ca6;

}

main section form input[type="submit"] {
    display: block;
    width: 10%;
    height: 3vw;
    line-height: 2.5;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.5vw;
    background-color: #608ca6;
    color: #fff;
    font-size: 1.2vw;
    transition: 0.2s;
}

main section form input[type="submit"]:hover {
    border: 1px solid #608ca6;
    background-color: #fff;
    border-radius: 0.5vw;
    color: #608ca6;
    transition: 0.2s;
}