@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth;}

a {
    font-family: ZenKakuGothicNew-Bold;
}

body {
   margin: 3%;
}

/* ====================
Google font
==================== */

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

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

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

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

.background1 {
    color: #50586C;
    background: #DCE2F0;
}

.background2 {
    color: #331B3F;
    background: #ACC7B4;
}

.background3 {
    color: #0A174E;
    background: #F5D042;
}

.background4 {
    color: #A4193D;
    background: #FFDFB9;
}

.background5 {
    color: #202020;
    background: #FFF;
}

/*  */
.btnbtn1 {
    color: #DCE2F0;
    background: #50586C;
}

.btnbtn2 {
    color: #ACC7B4;
    background: #331B3F;
}

.btnbtn3 {
    color: #F5D042;
    background: #0A174E;
}

.btnbtn4 {
    color: #FFDFB9;
    background: #A4193D;
}

.btnbtn5 {
    color: #FFFFFF;
    background: #202020;
}

/* ====================

==================== */
section {
    border: 1px solid;
    padding-bottom: 5%;
}

section h1 {
    padding-top: 2%;
    padding-bottom: 2%;
    border-bottom: 1px solid;
    text-align: center;
    font-size: 3vw;
    font-family: ZenKakuGothicNew-Medium;
}

section .img_box {
    width: 40%;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
}

section .img_box img {
    width: 100%;
    vertical-align: bottom;
}

section .ttl_box {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

section .ttl_box h2 {
    margin-bottom: 1rem;
    font-size: 4vw;
    font-family: ZenKakuGothicNew-Medium;
}

section .ttl_box .btn_flex {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

section .ttl_box .btn_flex .btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid;
    font-size: 1.2vw;
    font-family: ZenKakuGothicNew-Regular;
}

.parent {
    width: 70%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

.child {
    display: flex;
    margin-bottom: 4%;
}

.left {
    flex: 1;
}

.left p {
    display: inline-block;
    border-bottom: 1px solid;
    font-size: 1.2vw;
    font-family: ZenKakuGothicNew-Regular;
}

.right {
    flex: 3;
}

.right p {
    text-align: justify;
    font-size: 1.2vw;
    font-family: ZenKakuGothicNew-Regular;
}