@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');




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

html{
    font-size: 80%;
}


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



.wrap{
max-width: 800px;
height: auto;
padding: 0 40px;
margin: 0 auto;
line-height: 2.5rem;
}

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

a:hover{
background-color: #DAF2B4;/* ★リンクをホバーした時の背景色 */
}

/* リンク文字 
    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%;
    }
*/

/* 強調文 */
strong{
font-weight: 700;
border-bottom: 2px solid #454545;/* ★強調文の文字色と下線 */
}


.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;
}

.title_wrap-37 {
  font-family: 'Noto Serif JP', serif;
  padding: 8px 32px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: flex;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
  align-items: baseline;
}

p.title-37_en {
  font-size: 32px;
  position: relative;
}

/*
p.title-37_en::after {
  content: '';
  position: relative;
  background: #000000;
  width: 50px;
  height: 1px;
  rotate: -60deg;
  display: inline-block;
  right: 16px;
}*/

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

.h1 {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-size: 64px;
  color: #333;
  font-weight: 400;
  line-height: 1.5;
  display: block;
  box-sizing: border-box;
  text-align: center; 
  width: fit-content;
  margin: 0 0 2.5rem 0;
}

.h1::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -24px;
  width: 40px;
  height: 80px;
  border-left: 1px solid #333;
  rotate: 45deg;
  background-color: #ffffff;　/*背景と同じ色に変更してください*/
}

h4 {
    color: #d89ab5;
    font-size: 2.4rem;
    text-align: right;
    margin: 0 0 2rem;
}

/* 名前変換フォーム */

form{
display: flex;
margin: 2rem 0;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
font-family: "Kosugi Maru", serif;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;
border-radius: 0;
color: #5c5450;
border:1px #5c5450  solid;
height:2.5rem;
width: 6rem;
margin-right: 0.2rem;
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{
font-family: "Baloo 2", sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
border-radius: 0;
height:2.3em;
padding: 2px 5px 1px;
line-height: normal;
border:1.2px #5c5450  solid;
background-color: #5c5450;
color: #fff;
cursor: pointer;
transition: 0.2s;
padding: 0px 10px;
line-height: normal;
border: none;
}

/* ◎ボタンのホバー　★background-color: #◯;部分を変更 */
button:hover{
background-color: #2c92c4;
border:1.2px #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);
}*/

.wrap{
line-height: 1.8rem;
font-size: 1rem;
}

.top{
margin-top: 100px;
}

h4 {
    font-size: 1.5rem;
    text-align: right;
    margin: 0.8rem 0 3rem
}

.section{
margin: 40px auto;
}

.section+.section{
margin-top: 70px;
}

}