@charset "utf-8";

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

sp_top.css

========================*/
@media screen and (max-width:768px) {

/*---------------------------------------------
main_visual
---------------------------------------------*/
.index #top_main_visual {
 background-color:var(--color-blue-50);
 background-image:url(../../img/top/sp/bg.webp);
 background-size:contain;
 background-position:center top;
 margin-top:68px;
}

.index #top_main_visual #main_visual_cont {
 /*background: linear-gradient(-135deg,rgba(215, 231, 248, 0.1) 0%, rgba(39, 127, 175, 0.1) 50%, rgba(4, 69, 155, 0.1) 100%);*/
 min-height:400px;
 aspect-ratio: 12 / 15;
}

.index #top_main_visual #main_visual_cont #service_logo {
 top:100px;
 row-gap:15px;
}

.index #top_main_visual #main_visual_cont .scroll_nav {
 bottom:10px;
 height:130px;
 right:auto;
 left:10px;
 width:30px;
}

.index #top_main_visual #main_visual_cont .scroll_nav:after {
 height:130px;
 width:30px; 
}

#main_visual .figure_group figure {
 background-position:center top;
}

.index #top_main_visual #main_visual_cont .figure_group.sp .left_figure01 {
	background-image:url(../../img/top/sp/figure01_left.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .right_figure01 {
	background-image:url(../../img/top/sp/figure01_right.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_01 {
	background-image:url(../../img/top/sp/illust_01_01.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_02 {
	background-image:url(../../img/top/sp/illust_01_02.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_03 {
	background-image:url(../../img/top/sp/illust_01_03.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_04 {
	background-image:url(../../img/top/sp/illust_01_04.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_05 {
	background-image:url(../../img/top/sp/illust_01_05.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_06 {
	background-image:url(../../img/top/sp/illust_01_06.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_01_07 {
	background-image:url(../../img/top/sp/illust_01_07.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .left_figure02 {
	background-image:url(../../img/top/sp/figure02_left.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .right_figure02 {
	background-image:url(../../img/top/sp/figure02_right.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_02_01 {
	background-image:url(../../img/top/sp/illust_02_01.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_02_02 {
	background-image:url(../../img/top/sp/illust_02_02.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_02_02 {
	background-image:url(../../img/top/sp/illust_02_02.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_02_04 {
	background-image:url(../../img/top/sp/illust_02_04.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_02_05 {
	background-image:url(../../img/top/sp/illust_02_05.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .left_figure03 {
	background-image:url(../../img/top/sp/figure03_left.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .right_figure03 {
	background-image:url(../../img/top/sp/figure03_right.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_03_01 {
	background-image:url(../../img/top/sp/illust_03_01.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_03_02 {
	background-image:url(../../img/top/sp/illust_03_02.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_03_03 {
	background-image:url(../../img/top/sp/illust_03_03.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .illust_03_04 {
	background-image:url(../../img/top/sp/illust_03_04.webp);
}


.index #top_main_visual #main_visual_cont .figure_group.sp .t_work {
	background-image:url(../../img/top/sp/t_work.webp);
	transform-origin: center center;
}

.index #top_main_visual #main_visual_cont .figure_group.sp .t_learn {
	background-image:url(../../img/top/sp/t_learn.webp);
	transform-origin: center center;
}

.index #top_main_visual #main_visual_cont .figure_group.sp .t_experience {
	background-image:url(../../img/top/sp/t_experience.webp);
	transform-origin: center center;
}
 
.index #top_main_visual #main_visual_cont .figure_group.sp .cloud_left_top {
	background-image:url(../../img/top/sp/cloud_left_top.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .cloud_left_bottom {
	background-image:url(../../img/top/sp/cloud_left_bottom.webp);
}
 
.index #top_main_visual #main_visual_cont .figure_group.sp .cloud_right_top {
	background-image:url(../../img/top/sp/cloud_right_top.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .cloud_right_bottom {
	background-image:url(../../img/top/sp/cloud_right_bottom.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .bird_left {
	background-image:url(../../img/top/sp/bird_left_top.webp);
}

.index #top_main_visual #main_visual_cont .figure_group.sp .bird_right {
	background-image:url(../../img/top/sp/bird_right_top.webp);
}


.index #top_main_visual #main_visual_cont #service_logo {
 top:30px;
 right:50px;
}

.index #top_main_visual #main_visual_cont #page_title {
 display:flex;
 justify-content:center;
 align-items:flex-end;
 z-index:30;
 aspect-ratio:89 / 30;
 height:calc(100% - 80px);
 position:absolute;
 margin:auto;
 top:0;
 right:0;
 bottom:auto;
 left:0;
 max-width:400px;
 width:70vw;
}

.index #top_main_visual #main_visual_cont #page_title img {
 object-fit: contain;
 height:auto;
 aspect-ratio:89 / 30;
}

#top .slick-dots {
 bottom:30px;
}

/*---------------------------------------------
main(368)
---------------------------------------------*/
#top main {
 margin-top:0;
 row-gap:0;
}


/*---------------------------------------------
information(392)
---------------------------------------------*/
#information {
 padding:15px;
}

/*---------------------------------------------
category_menu(508)
---------------------------------------------*/
#category_menu {
 padding:0;
}

#category_menu ul {
 /*flex-direction:column;*/
 row-gap:0;
}

#category_menu ul li {
 border-bottom:1px dotted var(--color-gray-dd);
 padding:30px 30px 30px;
 width:100%;
}

#category_menu ul li h3 img {
 max-height:60px;
}

#category_menu ul li .btn a {
 font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.6944));
}

#category_menu ul li figure img {
 max-width:360px;
}

/*---------------------------------------------
section_title(588)
---------------------------------------------*/
.section_title figure {
 width:80px;
}

.section_title h2 span {
 font-size: calc(2.2rem + ((1vw - 0.48rem) * 0.6944));
 line-height:1.8;
}

.section_title h2 span.en {
 font-size: calc(1.1rem + ((1vw - 0.48rem) * 0.6944));
}

/*---------------------------------------------
news(666)
---------------------------------------------*/
#news {
 padding:20px 0 0;
}

#news #news_cont {
 align-items:stretch;
 flex-direction: column;
 padding-left:0;
 row-gap:0;
}

#news #news_cont ol {
 padding-right:20px;
 padding-left:20px;
 order:1; 
}

#news .archive_link {
 padding:10px 10px 0;
 position:relative;
 top:auto;
 order:3;
}

#news #news_cont .scroll_nav {
 bottom:45px;
 display: flex;
 justify-content: flex-end;
 position:relative;
 order:2;
}

/*---------------------------------------------
voice(815)
---------------------------------------------*/
#voice {
 padding:0; 
}

#voice:before {
 border-radius:0;
 height: calc(100% - 200px);
 top:50px;
 width:100%;
}

#voice:after {
 content:none;
}

#voice .flip_card_list_cont {
 flex-direction:column;
}

#voice .section_title {
 flex:0 1 auto;
 padding: 70px 20px 0;
 width:100%;
}

#voice .section_title figure {
 max-width:140px;
 width:25vw;
}

#voice .section_title .btn {
 margin-top:0;
 max-width:240px;
}

#voice #voice_cont {
 flex-direction:column;
 padding:0;
 row-gap:30px;
}

#voice .flip_card_list_detail {
 align-items:stretch;
 flex:1 1 100%;
 padding:0;
}

#voice .flip_card_list_detail ul {
 padding:0 0 50px;
 position:relative;
}

#voice .flip_card_list_detail ul li {
 aspect-ratio: 1 / 1.6;
 margin-right:20px;
}

#voice .flip_card_list_detail ul li .omote dl dt span {
 font-size: calc(1.1rem + ((1vw - 0.48rem) * 0.6944));
}

#voice .flip_card_list_detail ul li .ura dl dt {
 font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
}

#voice .flip_card_list_detail ul li .ura dl dd {
 font-size: calc(1.1rem + ((1vw - 0.48rem) * 0.6944));
 -webkit-line-clamp: 3;
}

#voice .flip_card_list_detail ul li .ura .btn {
 padding:10px 20px 20px;
}

#voice .flip_card_list_detail .card_list {
 padding:30px 15px 50px;
}

/*---------------------------------------------
card+animation
---------------------------------------------*/
.card {
 width:40vw;
 height:auto;
 aspect-ratio:32 / 20;
}

}