@charset "UTF-8";
/* =========================
   Base
========================= */
html {
    font-size: 100%;
}
body {
    margin: 0;

    font-size: 0.8rem;
    color: #012B2A;
    background-image: url("../img/bg.jpg");
    background-size: cover;
    background-attachment: fixed;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.wrapper {
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 1rem
}
/*--------------main--------------------*/
header {
    background-color: #5ba48a;
    width: 100%;
    line-height: 0.5rem;
    padding: 0.5rem;
}
/*--------------main--------------------*/
h1 {
    font-family: "Zen Maru Gothic", sans-serif;
    margin: 2.5rem 1rem 0;
    text-align:center;
    font-size: 1em;
    text-shadow: 0 0 5px #5ba48a;

        white-space: nowrap;
}
h2 {
    ont-family: "Zen Maru Gothic", sans-serif;
    margin: 2rem 1rem 0;
    text-align: center;
    font-size: 2em;
    text-shadow: 0 0 5px #5ba48a;
        white-space: nowrap;
}
.hero_logo p {
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 2rem;
    line-height: 0.5rem;
    text-shadow: 0 0 5px #5ba48a;
	        white-space: nowrap;
}
h4 {
    background-image: url("../img/dot.png");
    background-size: contain;
    background-position: left top;
    padding: 0.5rem 4rem;
    font-size: 1rem;
    border-bottom: 3px dotted #5ba48a;
    margin: 1rem 0 1rem;
}

.hero_logo
{
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
	
}
.main-text{
	margin-top: 1rem;
	padding: 1rem 1rem 1rem 4rem;
		 text-shadow: 1px 1px 5px #ECF6C9;
	background-image: url("../img/dot.png");
	background-size: 40px;
	background-position: left center;
}
.bold{
	font-weight: bold;
	font-size: 1rem;
}
/*--------------slick--------------------*/
.flower {
    box-shadow: 0 5px 10px #5ba48a;
    border: 1px solid #5ba48a;
    position: relative;
	background-color: rgba(231, 248, 229, 0.3);
}

.flower-frame {
    position: absolute;
    inset: 100px;
    z-index: 10;
    pointer-events: none;
}
/* フレーム画像 */
.frame1, .frame2 {
    position: absolute;
    z-index: 10; /* sliderより前 */
    pointer-events: none; /* スライド操作を邪魔しない */
}
.frame1 {
    width: 20%;
    height: auto;
    inset: -20px;
}
.frame2 {
    width: 10%;
    height: auto;
    right: -10px;
    bottom: -5px;
}
.slider {
    position: relative;
    z-index: 1;
    max-width: 100%;
	height: auto;
    margin: auto;
    padding: 1rem 0 0 2rem;
    padding-bottom: 2rem;
}
.slider img {
    width: 70%;
	height: auto;
	    box-shadow: 0 3px 10px #5ba48a;
}
.slick-prev:before, .slick-next:before {
    color: #000;
}
/*--------------section--------------------*/
section {
    margin-top: 3rem;
    padding: 0 2rem;
    box-shadow: 0 3px 10px #5ba48a;
    border: 1px solid #5ba48a;
    border-top: 5px solid #5ba48a;
	background-color: rgba(231, 248, 229, 0.3);
}
.btn {
    list-style: none;
    margin-bottom: 2rem;
	
}
.btn a {
    text-decoration: none;
    line-height: 1.5rem;
    border-radius: 20px;
    padding: 0 1rem;
    color: #fff;
    background-color: #5ba48a;
	        width: 100%;
        white-space: nowrap;
}
a.sample {
    padding: 0 1.4rem;
}
.item-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 2rem;
    align-items: center;
}
.tall {
    grid-row: span 2; /* ← 縦に2行 */
}
.big {
    grid-column: 1 / -1; /* ← 2列分使う */
}
.box_photo {
    grid-column: 1;
}
.box_photo img{
	box-shadow:  0 3px 10px #5ba48a;
}
.btn, .box_text {
    grid-column: 2;
}
.box_text {
    order: 1
}
.explanation {
    order: 3;
	text-align: justify
}
.btn {
    order: 2
}
.song {
    order: 4;
    background-color: #ECF6C9;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
}
/*--------------  Table --------------------*/
td:first-child {
    width: 6rem;
}
td:nth-child(2) {
    width: 10rem;
}
th {
    text-align: left;
}
/*--------------  fooer --------------------*/
footer {
    line-height: 2.5rem;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #5ba48a;
    width: 100%;
    text-align: center;
}
footer a {
    color: #fff;
    text-decoration: none;
    padding: 3rem 0 0 3rem;
	font-size: 1rem
}
/*--------------デスクトップ用--------------------*/
@media(min-width:500px) {
    .wrapper {
        padding: 0 2rem
    }
    .hero {
        display: flex;
        gap: 0.5rem;
        align-items: flex-end;
    }
    .hero_logo {
        width: 40%;
    }
    .hero_photo {
        width: 55%;
    }
    h1 {
        font-size: 0.7rem;
    }
    h2 {
        font-size:2rem;
    }
.hero_logo p {
        font-size: 1.3rem;
    }
    h4 {
        text-align: center;
    }
	.hero_logo
{
	display: block;
	
}
    /*--------------slick--------------------*/
    .frame1 {
        width: 20%;
        height: auto;
        inset: -20px; /* 上下左右0 */
    }
    .frame2 {
        width: 10%;
        height: auto;
        right: -10px;
        bottom: -10px;
    }
    .slider {
        padding-left: 2rem;
        padding-bottom: 1rem;
    }
    .slider img {
        width: 70%;
    }
    .slick-prev:before, .slick-next:before {
        color: #000;
    }
    .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: -5rem;
    }
    /*--------------セクション-------------------*/
    .btn {
        display: flex;
        gap: 1rem;
        list-style: none;
        margin: auto;
        margin-bottom: 2rem;
    }
    a.sample {
        padding: 0 1.4rem;
    }
    .tall {
        grid-row: span 2; /* ←縦に2行 */
    }
    .big {
        grid-column: auto /* ← 2列分使うのを１列に戻す */
    }
    .box_photo, .box_text, .btn {
        grid-column: 1;
    }
    .explanation, .song, .btn {
        grid-column: 2;
    }
    .box_text {
        order: 3;
        white-space: nowrap;
        margin-bottom: 2rem;
    }
    .explanation {
        order: 1
    }
    .btn {
        order: 3
    }
    .song {
        order: 2;
    }
}
/*--------------デスクトップ用--------------------*/
@media(min-width:800px) {

    .frame1 {
        width: 20%;
        height: auto;
        inset: -30px; /* 上下左右0 */
    }
}