@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');



/* 全体設定 */
*{
font-family: "Kosugi Maru", serif;
color: #454545;/* ★全体の文字色 */
font-weight: 400;
letter-spacing: 0.15em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration: none;
}

html{
    font-size: 80%;
}

body:before{
background: url('../img/01.png');/* ★PC用背景画像のURL*/
background-position: top center;
background-repeat: repeat-y;
background-size: contain;
content: "";
display: block;
position: fixed;
top: -100px;
left: -10%;
z-index: -99;
width: 120%;
min-height: calc(100vh + 100px);
}

body{
background-color: #FFF;/* ★全体の背景色 */
width: 100vw;
overflow-x: hidden;
font-size: 1.3rem;
}


.wrap{
max-width: 1000px;
height: auto;
padding: 0 40px;
margin: 0 auto;
}

/* リンク文字 */
    a {
        color: #5c5450;
    	text-decoration: none;
        position: relative;
        display: inline-block;
        transition: .3s;
    }

    a::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 0;
        height: 1px;
        background-color: #2c92c4;
        transition: .3s;
    }

    a:hover::after {
        width: 100%;
    }

/* リンク文字 */
.form a{
transition: 0.2s;
color: #e38219;
padding: 0.2rem;/* ★リンク文字の背景色 */
}

.form a:hover{
color: #2c92c4;/* ★リンクをホバーした時の背景色 */
}
/* 見出し */
h1{
  color:  #e38219;
  font-size: 3.5rem;
  letter-spacing: 0.3em;
  line-height: 5rem;
}

.form {
    margin: 3rem 0 2.5rem;
     line-height: 2.5rem;
}


/* TOPページ */
.top{
/*text-align: center;*/
width: 100%;
margin: 8rem 0;
}

.nav{
width: 100%;
/*display: flex;*/
justify-content: center;
gap: 25px;
margin: 30px auto 10px;
}

li{
line-height: 2.5rem;
}

.list li a{
/*font-family: 'Meddon', serif;*/
background: none;
}

.list li a:hover{
/*color: #16859a;/* ★メニューをホバーした時の文字色 */
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 80px auto;
}

hr{
    margin: 0.4rem;
    border-top: none;
}


input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;
border-radius: 0;
color: #333;
border:1px #333  solid;
height: 2.5rem;
width: 6em;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus, textarea:focus{
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;
border-radius: 0;

}

button{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
border-radius: 0;
height: 2.5rem;
width: 5rem;
padding: 2px 5px 1px;
line-height: normal;
border:1px #333  solid;
background-color: transparent;
color: #333;
cursor: pointer;
transition: 0.2s;
padding: 0px 10px;
line-height: normal;

}

/* ◎ボタンのホバー　★background-color: #◯;部分を変更 */
button:hover{
background-color: #2c92c4;
border:1px #2c92c4  solid;
color: #fff;

}
/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 1000px) {

body{
    font-size: 1.1rem;
}

body:before{
background: url('../img/02.png');/* ★スマホ用背景画像URL */
background-position: top center;
background-repeat: repeat-y;
background-size: contain;
top: -50px;
left: -20%;
width: 140%;
min-height: calc(100vh + 50px);
}

.top{
margin-top: 100px;
}

h1{
font-size: 3.3rem;
line-height: 4.5rem;
}

.form {
    margin: 3rem 0 2.5rem;
     line-height: 1.7rem;
}

}