@import url("menu.css");
.entry-header{
displat:none;
}
.slick-slider{
    margin-top: 80px;
}
.slick-dotted.slick-slider{
    
}
.slick-initialized .slick-slide{
    background-color: #fff;
}
.slick-slider .slick-track, .slick-slider .slick-list{
    border-radius: 40px;
    height: calc(100vh - 100px);
}
.slick-dots{
    bottom: 25px;
}

.main-image {
	margin-top: 80px;
	padding: 0 20px;
	position: relative;
}
.main-image img {
  width: 100%;
  height: calc(100vh - 100px); /* 画面の高さいっぱい */
  object-fit: cover; /* 比率を保ったままトリミング */
  display: block;
  border-radius: 40px;
}
.hukidashi1{
	background-image: url(../image/top/hukidashi1.webp);
	width: 365px;
	height: 227px;
	position: absolute;
	bottom: 10%;
    left: 10%;
    background-repeat:no-repeat;
}
.hukidashi1 p{
	color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 1.6;
    font-weight: 600;
    margin: 40px 0 0 0;
}
.hukidashi2{
	background-image: url(../image/top/hukidashi2.webp);
	width: 398px;
	height: 158px;
	position: absolute;
	bottom: 10%;
    right: 10%;
    background-repeat:no-repeat;
}
.hukidashi2 p{
	color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 1.6;
    font-weight: 600;
    margin: 34px 0 0 0;
}
#top-midashi{
	text-align: center;
	padding: 80px 0;
}
#top-midashi h2{
color: #00B735;
    font-size: 32px;
    font-weight: 600;
    margin: 30px 0;
}
#top-midashi p{
	    font-size: 24px;
    line-height: 2;
}

.triple-image-title {
    display: flex;
    align-items: flex-end;   /* 下合わせ */
    justify-content: center; /* 全体を中央寄せ */
    width: 100%;
    min-height: 170px;
}

/* 左の画像 (141x141) */
.side-image.left {
    flex: 1;                 /* 左側の余白を全部埋める */
    display: flex;
    justify-content: flex-end; /* 画像を中央に寄せる */
    align-items: flex-end;
}
.side-image.left::before {
    content: "";
    width: 141px;
    height: 141px;
    background: url('../image/top/title1_left.webp') no-repeat bottom right / contain;
    margin-right: 15px;
}

/* 中央の画像 (603x60) */
.center-text-image {
    width: 603px;
    height: 60px;
    background: url('../image/top/use_title.webp') no-repeat bottom center / contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;          /* 絶対にサイズを維持 */
}
h2.en .center-text-image{
    background: url('../image/top/use_en.webp') no-repeat bottom center / contain;

}
/* 右の画像 (262x170) */
.side-image.right {
    flex: 1;                 /* 右側の余白を全部埋める */
    display: flex;
    justify-content: flex-start; /* 画像を中央に寄せる */
    align-items: flex-end;
}
.side-image.right::before {
    content: "";
    width: 262px;
    height: 170px;
    background: url('../image/top/title1_right.webp') no-repeat bottom left / contain;
    margin-left: 15px;
}

.use-list {
    display: grid;
    /* 3列等分割。1fr（フラクション）を使うのがモダンな書き方 */
    grid-template-columns: repeat(3, 1fr);
    /* 2段（必要に応じて増えても自動で段になる） */
    gap: 8px; /* アイテム同士の隙間（適宜調整） */
    
    max-width: 1200px;
    margin: 80px auto;
}

.list-item {
    /* テキストの上下左右中央寄せ（Flexboxが最強） */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    text-align: center;      /* 複数行の場合のテキスト揃え */
    
    /* 高さ未定とのことなので、最小高さを仮で設定 */
    min-height: 200px; 
    padding: 20px;
    
    /* 読みやすさのための文字装飾（お好みで） */
    font-weight: bold;
    line-height: 1.6;
    border-radius: 10px;
    font-size: 24px;
    color: #fff;
}

/* 2. 背景色（全て違う色にする設定） */
.list-item:nth-child(1) { background-color: #F5A623; }
.list-item:nth-child(2) { background-color: #167FFC; }
.list-item:nth-child(3) { background-color: #F17669; }
.list-item:nth-child(4) { background-color: #AECF3E; }
.list-item:nth-child(5) { background-color: #00B735; }
.list-item:nth-child(6) { background-color: #3CABDB; }

#what{
	background-image: url(../image/top/what_bg.webp);
	background-size: cover;
	text-align: center;
	padding: 60px 0;
	background-position: center;
}
#what h2{
	width: 627px; /* 確定サイズへ */
    height: 80px; /* 確定サイズへ */
    margin: 50px auto;
    background: url('../image/top/what_title.webp') no-repeat center/contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#what h2.en{
    background: url('../image/top/what_en.webp') no-repeat center/contain;
 
}
.what-flex{
display: grid;
    /* 1行に2列並べる（1fr 1fr で 49% ずつに近い比率） */
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: 1fr;
    /* 縦横の隙間（gapで指定すると管理が楽です） */
    gap: 20px; 
    
    max-width: 1200px;
    margin: 0 auto;
    
    /* これで全行・全列の高さが「一番高い箱」に強制的に揃います */
    align-items: stretch;
}
.what-list{
	
	box-sizing: border-box;
    position: relative;
    padding: 30px;
    background-image: url(../image/top/what_frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    /* これを追加：背景を枠の本当の端（border）まで広げる */
    background-origin: border-box;   
    display: flex;
    align-items: center;
    height: 100%;
}
.what-list h3{
	font-size: 22px;
	font-weight: 600;
	position: absolute;
	top:50px;
	left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.what-list-flex{
	display: flex;
	justify-content: center;
	gap: 30px;
	align-items: center;
	width: 100%;
	margin: 70px 0 0 0;
}
.what-list-flex p{
	text-align: left;
	width: 58%;
	line-height: 2;
}
.what-list-flex p em{
	font-size: 14px;
	display: block;      /* ブロック化して余白を効かせる */
    margin-bottom: 15px;
}
.what4{
	width: 180px;
	height: auto;
}
#news{
	background-color: #FFF9E9;
	padding: 100px 0;
	text-align: center;
	position: relative;
}
#news h2 {
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    /* 2. 置き換える画像の指定 */
    background-image: url(../image/top/news_title.webp); /* お知らせ画像のパス */
    background-repeat: no-repeat;
    background-position: center; /* 必要に応じて調整 */
    background-size: contain;   /* 枠内に収める */

    /* 3. 画像のサイズに合わせて、h2自体の大きさを指定する（必須） */
    width: 100%;
    width: 250px;  
    height: 80px;

    /* 4. 配置調整（section内での位置） */
    margin: 50px auto; /* 中央寄せ */
}
#news h2.en{
   background-image: url(../image/top/info_en.webp); 
}
#news .news2{
	position: absolute;
	top: 100px;
    right: 100px;
}
.news-contents{
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}
.news{
	width: 32%;
	text-align: left;
	position: relative;
	    background: #fff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}
.news a{
	    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}
.news .date{
	margin: 10px 0;
}
.news img{
	border-radius: 10px;
}
.news-img{
	width: 320px;
}
.news2{
width: 87px;	
}
.btn-round {
    display: inline-block; /* 必須：marginやpaddingを効かせるため */
    padding: 20px 100px;    /* 上下 左右 の余白（文字サイズに合わせて調整） */
    background-color: #6BAE20; /* ボタンの背景色 */
    color: #fff;           /* テキストの色 */
    text-decoration: none;  /* 下線を消す */
    font-size: 1rem;       /* 文字サイズ */
    font-weight: bold;      /* 文字を太く */
    line-height: 1;        /* 行間を詰めて、paddingの計算を楽にする */

    /* * 両端を完璧に丸くする指定
     * 100px のような大きな値を指定すると、自動で「高さの半分」まで計算されます。
     */
    border-radius: 100px; 
    
    /* ホバー時のアニメーション */
    transition: background-color 0.3s ease; 
}

/* ホバー時のスタイル */
.btn-round:hover {
    opacity: 0.7;
}

/* ボタンを中央に配置したい場合（親要素に指定） */
.btn-container {
    text-align: center;
    margin-top: 50px; /* 必要に応じて調整 */
}
#information{
	padding: 100px 0;
}
#information h2 {
    /* 1. テキストを画面外に飛ばす（アクセシビリティを保ちつつ隠す） */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    /* 2. 置き換える画像の指定 */
    background-image: url(../image/top/info_title.webp); /* お知らせ画像のパス */
    background-repeat: no-repeat;
    background-position: center; /* 必要に応じて調整 */
    background-size: contain;   /* 枠内に収める */

    /* 3. 画像のサイズに合わせて、h2自体の大きさを指定する（必須） */
    /* 例：画像が横200px、縦50pxの場合 */
    width: 300px;  
    height: 80px;

    /* 4. 配置調整（section内での位置） */
    margin: 0 auto; /* 中央寄せ */
}
#information h2.en{
    background-image: url(../image/top/userguide.webp);
}
.info-contents{
	max-width: 1000px;
	margin: 50px auto;
	position: relative;
}
dl {
    display: grid;
    /* 左側(dt)の幅を固定し、右側(dd)を残り全部に割り当て */
    grid-template-columns: 120px 1fr; 
    width: 100%;
    max-width: 800px; /* 必要に応じて調整 */
    margin: 0 auto;
    border-top: dashed 1px #999;
}

dt {
    padding: 20px 0;      /* 上下の余白 */
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    
    /* 修正ポイント：上揃えにする */
    display: flex;
    align-items: start; 
    
    /* ddの一行目と高さを微調整したい場合はここを調整 */
    
}

/* 最後の項目の下線だけ消したい場合（任意） */
dt:last-of-type, 
dd:last-of-type {
    border-bottom: none;
}

/* dt（項目名）を太字にする場合 */
dt {
    font-weight: bold;
}
dt img{
	display: block;
}
dd {
    padding: 20px 0;
    border-bottom: 1px dashed #999;
    margin: 0;
    
    /* 修正ポイント */
    display: flex;
    flex-direction: column; /* 中身を縦に並べる */
    align-items: flex-start; /* 左寄せにする（centerだと画像も中央に寄ります） */
    justify-content: center; /* 行としての上下中央は維持 */
}
.into{
	margin-top: 20px;
}
.into .btn-round{
	vertical-align: top;
	padding: 20px 50px;
	    margin: 10px;
}
.info1{
	position: absolute;
	top: -158px;
    left: 100px;
    width: 200px;
}
.info2{
	position: absolute;
	top: -114px;
    right: 100px;
    width: 140px;
}
.line-link{
	display: none;
}
.line-qr{
	width: 200px;
}
.what-img{
	width: 300px;
}
.what1{
width: 230px;
}
.what2{
width: 80px;
}
.what3{
width: 92px;
}
.hukidashi-en p{
    line-height: 1.2;
    margin-top: 32px;
    font-size: 22px;
}
@media (max-width: 820px) {
.hukidashi1{
	width: 300px;
    height: 186px;
    bottom: 7%;
    left: 7%;
    background-size: cover;
}
.hukidashi2{
	width: 334px;
    height: 132px;
    bottom: 7%;
    right: 5%;
    background-size: cover;
}
.hukidashi1 p{
	font-size: 24px;
}
.hukidashi2 p{
	margin-top: 24px;
	font-size: 20px;
}
#top-midashi{
	padding: 50px 20px;
}
#top-midashi img{
	width: 300px;
}
#use{
	padding: 0 20px;
}
.side-image.left::before{
	width: 110px;
    height: 110px;
}
.side-image.right::before{
	width: 185px;
    height: 130px;
}
.center-text-image {
    width: 396px;
    height: 40px;
}
.list-item{
	min-height: 148px;
	    font-size: 18px;
	    padding: 8px;
}

#what h2{
	width: 425px;
	margin: 20px auto 40px;
}
.what-flex{
	padding: 0 20px;
}
.what-list-flex{
	    margin: 70px 0 0 0;
	    display: block;
}

.what-list h3 {
    font-size: 20px;
}
.what-list-flex p{
	width: 100%;
}

#news,#information{
	padding-left: 20px;
	padding-right: 20px;
}
.news-img{
	width: 250px;
}
#news h2,#information h2{
width: 200px;
    height: 50px;	
}
#information h2{
	    width: 200px;
    height: 50px;
}
.info1{
	width: 140px;
	top: -111px;
    left: 60px;
}
.info2{
	width: 100px;
	top: -82px;
    right: 54px;
}


}
@media (max-width: 768px) {
	.main-image {
    margin-top: 86px;
}
.main-image img {
    height: calc(100vh - 105px);
}
    .hukidashi1 {
        width: 250px;
        height: 155px;
        top: 7%;
    }
  .hukidashi1 p {
        font-size: 20px;
        margin: 32px 0 0 0;
    }
    #top-midashi img {
        width: 200px;
    }
    #top-midashi h2{
    	font-size: 24px;
    }
 #top-midashi p {
    font-size: 16px;
}
.side-image.right,.side-image.left{
	display: none;
}
.triple-image-title{
	min-height: 70px;
}
    .center-text-image {
        width: 350px;
        height: 35px;
    }
 .use-list {
    display: block;
}
    .list-item {
        min-height: 130px;
        font-size: 20px;
        margin-bottom: 10px;
    }
 .what-img {
        width: 250px;
    }
     #what h2 {
        width: 350px;
        margin: 20px auto 40px;
    }
.what-flex {
    display: block;
}
#news{
	padding: 50px 0;
}
.news-img {
        width: 200px;
    }
#news .news2{
	display: none;
}
    #news h2, #information h2 {
        width: 150px;
        height: 40px;
    }
.news-contents{
	display: block;
	padding-left:20px;
	padding-right: 20px;
}
.news {
    width: 100%;
}
#information {
    padding: 50px 20px;
}
.info1{
	display: none;
}
.info2{
	right: 0;
	width: 70px;
        top: -57px;
}
dl{
	display: block;
}
dt{
	border-bottom: none;
	padding: 20px 0 0;
}
dd {
    padding: 0px 0 20px;
    display: block;
    text-align: right;
    border-bottom: 1px dashed #999;
}
.line-qr{
	display: none;
}
.line-link{
	display: block;
}
.into{
	text-align: center;
}
.slick-dotted.slick-slider{
    margin-right: 0;
    margin-left: 0;
}
}