@charset "UTF-8";

/* TOPmain
/* ------------------------------------- */
.top-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 左1・右1 */
grid-template-rows: auto auto;/* 行の高さは自動 */
gap: 50px;/* 列・行の隙間 */
}

/* PC表示 */
.top-container .left {
grid-column: 1 / 2;
grid-row: 1 / 3; /* 左は上下2行分 */
min-height: 300px;
margin-left: -50px;
}

.top-container .top {
grid-column: 2 / 3;
grid-row: 1 / 2; /* 右上 */
margin: 0 10% 0 5%;
}

.top-container .bottom {
grid-column: 2 / 3;
grid-row: 2 / 3; /* 右下 */
margin-right: 10%;
text-align: left;
color: #7C461E;
}

/*ボタン */
.button-box {
display: flex;/* 横並び */
gap: 10px;/* 画像間の隙間 */
}

.button-box a {
flex: 1;/* 均等に幅を分ける */
display: block;
}

.button-box img {
width: 100%;/* リンク内で横幅いっぱい */
height: auto;
display: block;
padding: 0 10% 10% 10%;
box-sizing: border-box;
}

/*ボタンfooter */
.button-box-f {
display: flex;/* 横並び */
gap: 50px;
margin: 50px auto 0 auto;
width: 500px
}
.button-box-f a {
flex: 1;/* 均等に幅を分ける */
display: block;
}
.button-box-f img {
width: 100%;/* リンク内で横幅いっぱい */
height: auto;
display: block;
padding: 0 10% 10% 10%;
box-sizing: border-box;
}

@media (max-width: 768px) {
.top-container {
grid-template-columns: 1fr 2fr;; /* 左+右上 横並び */
grid-template-rows: auto auto; /* 下に右下 */
gap: 30px;
}
.top-container .left {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.top-container .top {
grid-column: 2 / 3;
grid-row: 1 / 2;
margin: 0 6% 0 0;
}
.top-container .bottom {
grid-column: 1 / 3; /* 幅いっぱい */
grid-row: 2 / 3;
margin:30px 6% 0 6%;
}
.button-box-f {
gap: 10px;
width: 100%
}
}
@media screen and (min-width: 1024px) {
.top-container {
width: 1000px;
margin: 0 auto
}
.top-container .left {
margin-left: 0;
}
.top-container .top {
margin-right: 0;
}
.top-container .bottom {
margin-right: 0;
}
}


/* content
/* ------------------------------------- */
.bg-content{
width: 100%;
margin: 0;
background: url(../img/top/bg_content.jpg) repeat;
position: relative;
overflow: hidden;
}
#svg-bg-content {
position: absolute;
width: 100%;
height: 150px;
top: 0;
left: 0;
z-index: 2;
}
#svg-bg-content-bottom {
position: absolute;
width: 100%;
height: 150px;
bottom: 0;
left: 0;
z-index: 2;
transform: rotate(180deg);
}

.bg-content .content-box {
position: relative;
z-index: 1;
padding: 20px; /* 必要に応じて調整 */
padding: 150px 0 150px 0;

}
.bg-content .content-box h3{
text-align:center;
font-size: 160%;
font-weight: bold;
line-height: 1.7;
margin: 0 0 20px 0;
color: #7C461E;
white-space: nowrap;
padding: 0
}
.bg-content .content-box p{
text-align:center;
}

/* 右上画像 */
.bg-content .top-right {
position: absolute;
top: 0;
right: 0;
width: 100%; /* 必要に応じてサイズ調整 */
height: auto;
z-index: 1;
}
/* 左下画像 */
.bg-content .bottom-left {
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* 必要に応じてサイズ調整 */
height: auto;
z-index: 1;
}
@media screen and (min-width: 1024px) {
.bg-content .top-right,
.bg-content .bottom-left{
width: 60%;
}
}
@media only screen and ( max-width : 767px ) {
/* 右上画像 */
.bg-content .top-right {
top: 50px;
right: 0;
}
/* 左下画像 */
.bg-content .bottom-left {
bottom: 50px;
left: 0;
}
.bg-content .content-box h3{
font-size: 140%;
line-height: 1.5;
}
.bg-content .content-box p{
text-align:left;
}
.bg-content .content-box p br {
display: none;
}
}

/* ボックス プレゼント　*/
.box_nuri {
padding: 2.5em 3.5em;
margin: 2em auto;
background: #fff;/*背景色*/
border-radius: 20px;
width: 100%;
box-sizing: border-box;
}
.box_nuri p{
margin: 0; 
padding: 0;
}

.present {
display: flex;
gap: 40px; /* 列の隙間 */
align-items: center;
}

/* 左1/3 */
.present .image {
flex: 0 0 33.33%; /* 幅固定 */
overflow: hidden;
max-height: 150px; /* 画像の最大高さ */
}

.present .image img {
width: 100%;
height: 100%;
object-fit: cover; /* トリミング */
display: block;
}

/* 右2/3 */
.present .text p{
flex: 0 0 66.66%; /* 幅固定 */
padding: 0;
color: #7C461E;
text-align: left;
font-size: 1.2em;
line-height: 1.3;
}
.present .text .highlight {
color: #F08300;/* 文字色をオレンジに */
font-size: 1.7em; /* 大きめにする */
font-weight: bold; /* 太字にする場合 */
line-height: 1.7;
}
.present .text .highlight span{
font-size: 70%;
}

@media (max-width:767px){
.box_nuri {
padding: 1.5em 2em;
}
.present {
flex-direction: column; /* 縦並び */
gap: 20px; /* 上下の隙間 */
}
.present .image,
.present .text {
flex: 0 0 100%;
}

.present .image img {
height: auto; /* 自然な高さ */
}
.present .text p{
font-size: 1.1em;
}
.present .text .highlight {
font-size: 1.4em;
line-height: 1.4;
}
}

@media (min-width: 1024px) {
.box_nuri{
width: 1000px;
}
}


/*全体見出し
---------------------------------------------------------------------------*/
.section-title-f{
text-align:center;
font-size: 160%;
font-weight: bold;
line-height: 1.2;
margin: 0 0 20px 0;
color: #fff;
white-space: nowrap;
padding: 0
}
.section-title-f span{
font-size: .5em;
display: block;
letter-spacing:.05em;
color: #fff;
padding: 10px 0;
}
@media screen and (min-width: 1024px) {
.section-title-f{
font-size: 180%;
}
}


/* message
/* ------------------------------------- */
.bg-message{
width: 100%;
margin: 0;
color: #FFF;
background: url(../img/top/bg_message.jpg) repeat;
position: relative;
overflow: hidden;
}
#svg-bg-message {
position: absolute;
width: 100%;
height: 150px;
bottom: 0;
left: 0;
z-index: 1;
transform: rotate(180deg);
}
.message-box{
padding: 20px 0 120px 0;
z-index: 2;
}
@media only screen and (max-width: 1023px) {
#svg-bg-message {
height: 100px;
}
.message-box{
padding:20px 0 100px 0;
}
}

/* 2等分 */
.me_box {
display: flex;
gap:80px;
margin: 40px auto;
flex-wrap: wrap;
width: 100%;
max-width: 980px;
}
.me_box .item {
flex: 1 1 45%;/* 2列目安 */
padding: 0;
text-align: center;
box-sizing: border-box;
}
.me_box h5.midasi{
font-size: 1.5em;
font-weight: bold;
line-height: 1.6;
text-align: left;
margin-bottom: 20px
}
.me_box h5.name{
font-size: 1.5em;
font-weight: bold;
line-height: 2
}
.me_box h5.name span{
font-size:0.6em;
font-weight: bold;
line-height: 2
}
/* video */
.video-container-yoko {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom: 10px;
}
.video-container {
position: relative;
width: 100%;
padding-top: 177.78%; /* 9:16の縦長 */
margin-bottom: 10px;
}
.video-container video,
.video-container-yoko video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h4.CHEERS {
margin: 80px 0 0 0;
}
@media (max-width: 768px) {
.me_box {
gap:20px;
}
.me_box .item {
flex: 1 1 100%; /* スマホでは幅100%で1列 */
gap: 30px;
}
.me_box .item.right{
margin-top: 50px
}
.me_box h5.midasi{
font-size: 1.4em;
line-height: 1.5;
}
.me_box h5.name{
font-size: 1.4em;
}
}

/* ---------------------------------------------------------------------------------------------

　 鳥イラスト　animation

--------------------------------------------------------------------------------------------- */
.animation{
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
.keyframe_yura{animation-name: anim_v;}
@keyframes anim_v {
0% {transform: translate(0, 0px);}
100% {transform: translate(0, -10px);}}
.keyframe_fuwa{animation-name: anim_h;}
@keyframes anim_h {
0% {transform: translate(0px, 0);}
100% {transform: translate(10px, 0);}}

/* 画像 */
.badge_r img{width: 200px;height: auto;}
.badge_l img{width: 135px;height: auto;}
/* 表示位置 */
.kazari	{position: relative;}
.badge_r {position: absolute;	top: 30px;	right: 5%;z-index: 10}
.badge_l {position: absolute;	top: 10px;	left:5%;z-index: 10}
@media screen and (max-width: 767px) {
.badge_r img{width: 100px;height: auto;}
.badge_l img{width: 70px;height: auto;}
}