@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP:500,600,700&display=swap&subset=japanese);

* {box-sizing: border-box; padding: 0; margin: 0;}
html,
body {margin: 0; padding: 0; font-family: "Noto Serif JP", serif !important;}
img,
.wrapper {width: 100%;}
body {background: #fff;}
.wrapper {background-color: #477137; background-image: url(img/bg_shape.webp), linear-gradient(135deg, rgba(71, 113, 55, 1) 0%, rgba(126, 165, 43, 1) 50%, rgba(71, 113, 55, 1) 100%); background-repeat: repeat; background-position: center top; background-attachment: fixed; background-size: contain; padding: 1rem;}
a {text-decoration: none;}
.content {max-width: 1200px; margin: auto;}
.al-right {text-align: right;}
/* ========================================
   HEADER
======================================== */

.header {}
.header .content {padding: 1rem 5% 2rem; display: flex; align-items: flex-end; gap: 3rem;}
.header .content h1 {font-size: min(5vw, 3rem); margin: 0; color: #FFF; letter-spacing: .1em;}
.header .content h2 {font-size: min(4vw, 1.8rem); margin: 0; color: #FFF; letter-spacing: .1em;}
.header .content p {font-size: min(3vw, 1.2rem); margin: 0; color: #FFF; letter-spacing: .1em; text-align: justify;}
.logo {width: 180px; transition: width .4s ease, transform .4s ease;}
.logo img {display: block; width: 100%; height: auto;}

/*
 * スクロール後
 */
.header.is-scroll .logo {width: 150px;}

/* ========================================
   SCROLL CONTENTS
======================================== */

.scroll_contents {position: relative; width: 100%; background: #fff; padding-bottom: 5%;}

/* ========================================
   CONTENT
======================================== */

.content_inner {position: relative; width: 100%; padding: 5%;}
.content_inner p {font-size: min(3.4vw, 1rem); line-height: 2; margin-bottom: 1rem;}
.content_inner h2 {font-size: min(4vw, 2rem); line-height: 2; margin-bottom: 1rem;}
.content_inner h2 + p {font-size: min(3.6vw, 1.2rem); line-height: 2; margin-bottom: 1rem;}
.content_inner h3 {font-size: min(3.6vw, 1.2rem); line-height: 2; margin-bottom: .5rem;}
/*
 * CONTENT 01
 */
.content_inner01 {position: relative;}

.content_inner02 {position: relative;}
.content_inner02 + .content_inner02 {padding-top: 0;}
.no_scroll_contents {position: relative; width: 100%;}
.content_inner03 {position: relative; width: 100%;}

img {

    width: 100%; height: auto;}
.content_inner .msg_name {font-size: min(4vw, 1.2rem);}
.msg_img {float: right; max-width: 200px; margin: 1rem;}
.dr_pic {display: flex; gap: 2rem; padding: 2rem 4rem;}
.dr_pic .dr_pic_img {max-width: 200px;}
.content_img {line-height: 1; padding-inline: 5%;}

/* ========================================
   FOOTER
======================================== */
.copy {text-align: center; color: #FFF; font-size: .875rem; padding: 1rem;}

/* ========================================
   TABLET / SP
======================================== */

@media screen and (max-width: 580px) {

    .header {padding: 10px 0%; }
    .logo {width: 100px; }
    .header .content {
        padding: 1rem 0% 2rem;
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        width: fit-content;
        margin-inline: auto;
    }
    .content_inner {padding: 40px 6%; }
    .msg_img {float: right; max-width: 40%; margin-block: 0;}
    .dr_pic {display: block; padding: 0;}
    .dr_pic .dr_pic_img {max-width: 40%;}
}