@charset 'utf-8';
/* TOP用CSS */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
イントロ部分（スライダー）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* コンテナクエリ */
div.intro { container-type:inline-size; container-name:top_intro; position:relative; z-index:0; }

/* イントロ */
div.intro div.table { max-height:450px; }
div.intro div.slide { overflow:hidden; height:450px; width:100%; }
div.intro div.slide ul.splide__list { aspect-ratio:12/10; max-height:450px; height:100%; width:100vw; }
div.intro div.slide ul.splide__list li img { object-fit:cover; object-position:center center; height:450px; min-width:100%; max-width:auto; width:100%; }
div.intro div.slide ul.splide__list li.slide_movie iframe { height:100%; width:100%; }

@container top_intro ( max-width:580px ) { /* 580px幅以下処理 */

/* イントロ */
div.intro div.slide ul.splide__list { aspect-ratio:1/1; }
div.intro div.slide ul.splide__list li img { object-position:center center; height:100%; min-width:auto; max-width:auto; width:100%; }
div.intro div.slide ul.splide__list li.slide_movie iframe { height:100%; width:100%; }

}

@container top_intro ( min-width:1024px ) { /* PC幅 */

/* イントロ */
div.intro div.table { max-height:700px; }
div.intro div.slide { overflow:hidden; height:700px; width:100%; }
div.intro div.slide ul.splide__list { aspect-ratio:16/9; max-height:700px; height:100%; width:100vw; }
div.intro div.slide ul.splide__list li img { object-position:center center; height:700px; min-width:960px; max-width:auto; width:100vw; }
div.intro div.slide ul.splide__list li.slide_movie iframe { height:100%; width:100%; }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
汎用
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 背景画像設定 */
div.about, div.pickup { background-image:url("../img/top/back.jpg"); }

/* 見出し系 */
main h1 { margin:0 auto 30px auto; }
.midahi { color:#34951a; font-size:30px; font-weight:500; line-height:1; }
.midahi span { background-image:linear-gradient(0deg,#fdd000 40%, transparent 40%); display:inline-block; padding:0 2.5px 2.5px 2.5px; }

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
about
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 汎用 */
div.about { padding:40px 0; }

/* コンテナクエリ */
div.about_in { container-type:inline-size; container-name:about; }

/* 横幅 */
div.about_content { padding:0 20px; }

/* about-content */
div.about_box h3 { font-size:18px; font-weight:500; line-height:2; margin:0 0 10px 0; }
div.about_box h3 span { background-color:#34951a; color:#fff; display:inline-block; padding:2px 5px; margin:0 0 5px 0; }
div.about_text_box p { text-align:justify; line-height:1.6; margin:0 0 10px 0; }
div.about_text_box p.more { margin:10px 0 0 0; }
div.about_text_box p.more::before { content:''; background-position:center center; background-size:contain; background-image:url("../img/top/about/more.svg"); background-repeat:no-repeat; display:inline-block; margin:0 5px 0 0; vertical-align:middle; height:16px; width:17px; }
div.about_box_ph { aspect-ratio:3/2; overflow:hidden; height:auto; width:100%; }
div.about_box_ph img { width:100%; }
div.about_flex.flex_revers { margin:50px auto 50px auto; }

@container about ( min-width:768px ) { /* tab幅 */

/* 見出し系 */
main h1 { margin:0 auto 40px auto; }
.midahi { font-size:36px; }

/* about-content */
div.about_flex { display:flex; justify-content:center; align-items:center; padding:0 50px; position:relative; margin:auto; z-index:1; }
div.about_box { transform:translate(75px,0); z-index:2; }
div.about_text_box { padding:0 50px 0 0; transform:translate(0,0); width:450px; }
div.about_box_ph { transform:translate(-75px,0); z-index:1; width:450px; }
div.about_flex.flex_revers { flex-direction:row-reverse; }
div.about_flex.flex_revers div.about_box { transform:translate(25px,0); }
div.about_flex.flex_revers div.about_box_ph { transform:translate(75px,0); z-index:1; }

}

@container about ( min-width:1024px ) { /* PC幅 */

/* 横幅 */
div.about_content { padding:0; margin:auto; max-width:1200px; width:100%; }

/* about-content */
div.about_text_box { padding:0 50px 0 0; width:600px; }
div.about_box_ph { width:600px; }
div.about_flex.flex_revers p.more { text-align:right; }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
News
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 汎用 */
div.news { padding:40px 0; }

/* コンテナクエリ */
div.news_in { container-type:inline-size; container-name:news; }

/* ニュース新着部分 */
div.news_box { background-color:#e5f1e4; padding:20px 15px; margin:0 10px; }
div.news_box div.news_box_in { background-color:#fff; padding:15px 20px; }

/* ニュースループ */
ul.news_list li div.news_flex { display:flex; justify-content:flex-start; align-items:flex-start; margin:0 0 5px 0; }
ul.news_list li { border-bottom:1px solid #666; }
ul.news_list li p { font-size:15px; }
ul.news_list li a { display:block; padding:10px 0; }
ul.news_list li a:link, ul.news_list li a:visited { opacity:1; transition:.3s; }
ul.news_list li a:active, ul.news_list li a:hover { opacity:0.5; transition:.3s; }
ul.news_list li div.news_flex p.date { margin:0 10px 0 0; }
ul.news_list li div.news_flex p.news_cate span { display:inline-block; font-size:14px; padding:2.5px 5px; }
ul.news_list li p.kiji_title { line-height:1.61; }

/* もっと見る */
p.news_more { text-align:center; margin:20px auto; }
p.news_more a { display:inline-block; padding:10px 12.5px; border-bottom:1px solid #555; }
p.news_more a::before { content:'＞'; margin:0 5px 0 0; }

@container news ( min-width:768px ) { /* tab幅 */

/* 見出し系 */
main h1 { margin:0 auto 40px auto; }
.midahi { font-size:36px; }

/* ニュース新着部分 */
div.news_box { padding:50px 60px; margin:auto; max-width:960px; width:75%; }
div.news_box div.news_box_in { padding:40px 60px; }

/* ニュースループ */
ul.news_list li p { font-size:16px; }
ul.news_list li a { padding:15px 10px; }


}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PickUp
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 汎用 */
div.pickup { padding:40px 0; }

/* コンテナクエリ */
div.pickup_in { container-type:inline-size; container-name:pickup; }

/* リスト */
ul.picklist { margin:auto; max-width:90%; }
ul.picklist li { text-align:center; margin:auto auto 20px auto; }
ul.picklist li img { margin:auto; height:auto; width:200px; }

@container pickup ( min-width:768px ) { /* tab幅 */

/* 見出し系 */
main h1 { margin:0 auto 40px auto; }
.midahi { font-size:36px; }

/* リスト */
ul.picklist { display:flex; justify-content:space-around; align-items:center; max-width:960px; }
ul.picklist li img { width:225px; }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
event
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 汎用 */
div.event { padding:40px 0; }

/* コンテナクエリ */
div.event_in { container-type:inline-size; container-name:event; }

/* スライダー */
div.event_slide ul li { margin:0 10px; }
div.event_slide div.splide__arrows { display:none; }
div.event_slide ul.splide__pagination { display:none; }

@container event ( min-width:768px ) { /* tab幅 */

/* 見出し系 */
main h1 { margin:0 auto 40px auto; }
.midahi { font-size:36px; }

/* スライダー */
div.event_slide { margin:auto; max-width:820px; }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
特設
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

div.tokusetsu_care { margin:20px auto; max-width:90%; } 

@media ( min-width:960px ) {

div.tokusetsu_flex { display:flex; justify-content:space-around; align-items:center; margin:auto; width:960px; }
div.tokusetsu_care { aspect-ratio:16/9; overflow:hidden; margin:50px auto 30px auto; padding:0 10px; max-width:480px; } 
div.tokusetsu_care img { margin:auto; object-fit:contain; width:auto; }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ともうさ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 動画 */
.modal { display:none; }
div.modal { position:fixed; z-index:99999; top:0; left:0; height:100vh; width:100vw; }
div.modal-bg { background-color:rgba(0,0,0,0.5); cursor:pointer; position:absolute; top:0; left:0; height:100vh; width:100vw; z-index:1; }
div.modal div.modal_content { aspect-ratio:1/1; display:inline-block; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:auto; width:90%; z-index:2; }
div.modal div.modal_content video { width:100%; }

div.tomousa_bnr { aspect-ratio:16/9; background-image:url("../img/top/tomousa/bg.png"); box-sizing:border-box; border:1px solid rgba(0,0,0,0); margin:30px auto; padding:0; position:relative; z-index:1; overflow-y:auto; overflow-x:hidden; height:551px; width:980px; }

div.scroll_area img { max-width:360px; width:100%; }
div.scroll_area p.button img { width:250px; }

div.tomousa_logo { display:none; }
div.tomousa_second_content { background-color:#fff; padding:20px 0 50px 0; width:100%; }
div.tomousa_bnr div.scroll_area { background-color:#45ce71; position:relative; z-index:1; overflow-y:scroll; overflow-x:hidden; padding:0; margin:0 150px 0 auto; height:100%; width:360px; scrollbar-width:thin;  scrollbar-color:#008000; }
div.tomousa_bnr div.scroll_area::before { background-size:contain; background-position:top right; background-repeat:no-repeat; background-image:url("../img/top/tomousa/tomousa_top_sp.svg"); content:''; display:block; position:absolute; top:0; left:0; min-height:573px; height:100%; width:360px; z-index:2; }
div.tomousa_bnr div.scroll_area::-webkit-scrollbar { width:5px; }
div.tomousa_bnr div.scroll_area::-webkit-scrollbar-track { background-color:rgba(255,255,255,0.5); }
div.tomousa_bnr div.scroll_area::-webkit-scrollbar-thumb { background-color:#008000; border-radius:5px; }
div.tomousa_first { margin:110% 0 0 0; padding:0 20px; }
div.tomousa_first p { color:#fff; font-weight:600; margin:0 0 1rem 0; line-height:2; }
div.second_item { margin:0 auto 50px auto; height:531px; width:336px; }
div.second_item.item01 { background-image:url("../img/top/tomousa/second_01_bg.png"); }
div.second_item.item02 { background-image:url("../img/top/tomousa/second_02_bg.png"); }
div.second_item.item03 { background-image:url("../img/top/tomousa/second_03_bg.png"); }
div.second_item.item04 { background-image:url("../img/top/tomousa/second_04_bg.png"); }
div.second_item.item05 { background-image:url("../img/top/tomousa/second_05_bg.png"); }
div.tomousa_third { background-color:#ffecdc; position:relative; z-index:1; padding:0 0 20px 0; }
div.tomousa_third::before { background-color:#fff; border-radius:50% / 0 0 100% 100%; content:''; display:inline-block; top:0; left:0; height:100px; width:360px; }
div.tomousa_third p.genki { padding:30px 20px; }
div.tomousa_third p.genki img { max-width:100%; }
p.tomousa_movie { text-align:center; }
p.tomousa_movie img { margin:130px 0 0 0; width:280px; }
p.share img { width:200px; }
div.acc p { margin:0 0 50px 0; }
div.acc p img { width:275px; margin:auto; } 
div.tomousa_four { background-color:#fff; position:relative; z-index:1; }
div.tomousa_four::before { background-color:#ffecdc; border-radius:50% / 0 0 100% 100%;; content:''; display:inline-block; top:0; left:0; height:100px; width:360px; }
div.tomousa_four p.title { padding:30px; }
div.tomousa_five { background-color:#e8f6e0; position:relative; z-index:1; }
p.five_illust img { position:absolute; top:-100px; left:0; height:auto; width:220px; }
div.tomousa_five { border-radius:0 0 50% 50%; padding:0 0 50px 0; margin:0 0 50px 0; }
div.tomousa_five ul { display:flex; justify-content:space-around; align-items:flex-start; flex-wrap:wrap; }
div.tomousa_five ul li { text-align:center; margin:0 0 10px 0; width:50%; }
div.tomousa_five ul li img { height:auto; width:141px; }
div.tomousa_footer p { color:#fff; font-weight:600; line-height:1.8; }
ul.footer_sns_list { display:flex; justify-content:center; align-items:flex-start; margin:10px 0 0 0; }
ul.footer_sns_list li { padding:0 5px; }
ul.footer_content_list { display:flex; justify-content:space-around; align-items:flex-start; margin:30px 0; }
ul.footer_content_list li { padding:0 2.5px; }
div.tomousa_footer p.kakusan { margin:20px 0 0 0; }
div.tomousa_footer p.kakusan img { width:275px; }

@media screen and (max-width:480px) { /* スマホ */

div.w { max-width:90%; width:100%; margin:0 auto; }

div.tomousa_bnr { aspect-ratio:auto; overflow-x:hidden; width:100%; }
div.tomousa_bnr div.scroll_area { margin:0 auto; }
div.tomousa_side { display:none; }
div.bnr_main { display:none; }

div.page section { max-width:90%; margin:auto; }
div.page p { font-size:14px; }
div.page h1 { font-size:18px; }
div.page h2 { font-size:18px; }
div.page div.index_box p { font-size:14px; }

}

@media screen and (min-width:481px) and (max-width:979px) { /* タブレット */

/* 動画 */
div.modal div.modal_content  { width:85vw; }

div.w { max-width:80%; width:100%; margin:auto; }

div.tomousa_bnr { aspect-ratio:auto; overflow-x:hidden; width:100%; }
div.tomousa_bnr div.scroll_area { margin:0 auto; }
div.tomousa_side { display:none; }
div.bnr_main { display:none; }

div.txt div.ph { float:right; padding:0 0 10px 15px; width:300px; max-width:200px; }
div.page section { max-width:80%; margin:0 auto; }
div.page h1 { font-size:20px; }
div.page h2 { font-size:20px; margin:15px 0; }
div.page div.index_box p { font-size:16px; }

}


@media screen and (min-width:980px) { /* PC */

/* 動画 */
div.modal div.modal_content  { width:720px; }

 .top_section04::after,  .top_section04::before { background-image:none; }

div.about_block { margin:0 0 50px 0; }

div.top_flex { display:flex; justify-content:space-around; align-items:center; }
div.row_receive { flex-direction:row-reverse; }
div.top_flex_box { width:50%; }
div.box_text { transform:translate(30px,0); z-index:2; }
div.box_ph { transform:translate(-30px,0); z-index:1; }
div.row_receive div.box_text { transform:translate(-30px,0); z-index:2; }
div.row_receive div.box_ph { transform:translate(30px,0); z-index:1; }
div.row_receive p.more { text-align:right; }

div.tomousa_logo { display:inline-block; position:absolute; right:15px; bottom:10px; }
div.tomousa_logo img { height:auto; width:120px; }
div.tomousa_side { display:inline-block; position:absolute; top:50%; right:0; transform:translate(0,-50%); z-index:1; }
div.tomousa_side ul li { text-align:center; margin:0 0 10px 0; }
div.tomousa_side ul li.tomousa_side_kakusan img { height:150px; }
div.tomousa_side ul li.zureusa img { transform:translate(10px,0); height:auto; width:60px; }

div.bnr_main { background-size:contain; background-position:center center; background-repeat:no-repeat; background-image:url("../img/top/tomousa/pc_main.png"); display:inline-block; transform:translate(0,-60%); position:absolute; top:50%; left:40px; height:531px; width:360px; }
ul.bnr_main_button_list { display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; position:absolute; top:390px; width:360px; }
ul.bnr_main_button_list li { text-align:center; padding:3px; width:50%; }
ul.bnr_main_button_list li img { max-width:100%; }

div.top_section04_box01 { justify-content:center; flex-wrap:nowrap; max-width:960px; width:960px; }
div.top_section04_box01_block { padding:10px; }
div.top_section04_box01 img { background-color:transparent; }


div.txt div.ph { float:right; padding:0 0 10px 15px; max-width:300px; }
div.page section { max-width:960px; margin:0 auto; }
div.page h1 { font-size:20px; }
div.page h2 { font-size:20px; margin:15px 0; }

}