@charset "utf-8";


/*====================================================================
トップバナー
====================================================================*/
.top-banner_wrap_01 {
margin-top: -60px;
}
.top-banner_wrap_02 {
padding: 0 15px
}

.top-banner_decoration_01 {
position: relative;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
}
.top-banner_decoration_02 {
position: relative;
max-width: 1300px;
margin: 0 auto;
overflow: hidden;
}
.top-banner_decoration_01 .square_01 { 
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.top-banner_decoration_02 .square_02 { 
position: absolute;
right: 30px;
bottom: 0;
}

.top-banner { 
max-width: 1000px;
margin: 0 auto 80px auto;
padding-top: 140px;
}

.top-banner .banner-box { 
display: flex;
justify-content: center;
align-items: center;
}
.top-banner .banner-box a { 
display: block;
width: 49%;
filter: drop-shadow(5px 5px 5px #ccc);
z-index: 3;
}
.top-banner .banner-box a:last-child { 
margin-left: 2%;
}

@media screen and (max-width: 1400px) { 
.top-banner_decoration_01 .square_01 { left: -20px; }
}
@media screen and (max-width: 1300px) { 
.top-banner_decoration_01 .square_01 { left: -60px; }
}
@media screen and (max-width: 1200px) { 
.top-banner_decoration_01 .square_01 { left: -100px; }
}
@media screen and (max-width: 767px) { 
.top-banner_decoration_01 .square_01 { top: 20px; }
.top-banner_decoration_02 .square_02 { right: -30px; }
.top-banner { max-width: 600px; }
.top-banner .banner-box { flex-direction: column; }
.top-banner .banner-box a { width: 100%; }
.top-banner .banner-box a:last-child { margin-left: 0; margin-top: 30px; }
}



/*====================================================================
pickup
====================================================================*/
.pickup_line_wrap { 
overflow: hidden;
margin-bottom: -130px;
}
.pickup_line_box { 
position: relative;
max-width: 1400px;
height: 180px;
margin: 0 auto;
}
.pickup_line_box .line_blue {    
position: absolute;
left: 0;
top: 0;
}

.pickup_square_wrap {
margin-top: 30px;
margin-bottom: 30px;
}
.pickup_square_box { 
position: relative;
max-width: 1400px;
margin: 0 auto;
}
.pickup_square_box .square_01 { 
position: absolute;
right: 0;
bottom: 0;
}
.pickup_square_box .square_02 { 
position: absolute;
left: 0;
bottom: 0;
}

@media screen and (max-width: 1400px) { 
.pickup_line_box .line_blue { left: -20px; }
}
@media screen and (max-width: 1300px) { 
.pickup_line_box .line_blue { left: -60px; }
}
@media screen and (max-width: 1200px) { 
.pickup_line_box .line_blue { left: -100px; }
}
@media screen and (max-width: 767px) { 
.pickup_line_box .line_blue { top: -20px; }
.pickup_square_wrap { margin-top: 80px; margin-bottom: -50px; }
.pickup_square_box .square_01 img { height: 150px; }
.pickup_square_box .square_02 { display: none; }
}



.banner-gallery {
display: none;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.banner-gallery ul { 
padding: 0;
}
    
.banner-gallery .slick-prev:before { 
display: flex;
justify-content: center;
align-items: center;    
}    

/*メイン画像下に余白をつける*/
.banner-gallery .gallery{
margin: 0 0 5px 0;
}
.banner-gallery .gallery li {
list-style:none;
}
/*矢印の設定*/

/*選択するサムネイル画像の設定*/
.banner-gallery .choice-btn li{
cursor: pointer;
outline: none;
background: #333;
list-style: none;
}
.banner-gallery .choice-btn li img{
opacity: 0.4;/*選択されていないものは透過40%*/
}
.banner-gallery .choice-btn li.slick-current img{
opacity: 1;/*選択されているものは透過しない*/
}

.banner-gallery .slick-prev:before, .banner-gallery .slick-next:before { 
font-size: 40px; 
opacity: 1;
}
.banner-gallery .slick-prev:before { 
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;  
}
.slick-next:before { 
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;    
}
    
@media screen and (max-width: 767px) { 
.banner-gallery  { display: block; }
}



.right_over {
overflow: hidden;
}
.right_wrap {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: auto;
}
.right_content {
width: 100vw;
margin-right: calc(50% - 50vw);
background: url(../../renew2024/images-top/parts/background_lightblue.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.right_box { 
display: flex;
align-items: flex-start;
justify-content: flex-start;
max-width: 1200px;
margin: 0 auto;
margin-left: 0;
padding: 80px 50px 120px 50px;
}
    
.right_box .title { 
width: 100%;
max-width: 132px;
margin-right: 30px;
}
.right_box .title .sp-img { 
display: none;
}
.right_box .banner { 
z-index: 1;
}
.right_box .banner a { 
display: inline-block;
width: 30%;
margin: 0 1% 20px 1%;
filter: drop-shadow(5px 5px 5px #ccc);
}

@media screen and (max-width: 767px) { 
.right_box { display: block; max-width: 600px; margin: 0 auto; padding: 80px 15px; }
.right_box .title { max-width: 100%; margin-right: 0; margin-bottom: 30px; }
.right_box .title .pc-img { display: none; }
.right_box .title .sp-img { display: block; }
.right_box .title img { height: 100px; }
.right_box .banner { display: none; }
}
@media screen and (max-width: 500px) { 
.right_box .title img { height: 80px; }
}



/*====================================================================
course
====================================================================*/
.course_line_wrap { 
overflow: hidden;
margin-bottom: -50px;
}
.course_line_box { 
position: relative;
max-width: 1400px;
height: 180px;
margin: 0 auto;
}
.course_line_box .line_blue { 
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1400px) { 
.course_line_box.line_blue { left: -20px; }
}
@media screen and (max-width: 1300px) { 
.course_line_box .line_blue { left: -60px; }
}
@media screen and (max-width: 1200px) { 
.course_line_box .line_blue { left: -100px; }
}
@media screen and (max-width: 767px) { 
.course_line_box .line_blue { top: -20px; }
}



.course_wrap { 
padding: 0 15px;
}
.course_content { 
max-width: 1000px;
margin: 0 auto;
}

.course_content .title { 
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 24px;
font-weight: bold;
line-height: 1.2em;
color: #1e90ff;
margin-bottom: 50px;
}
.course_content .title img { 
margin-right: 30px;
}

.course-guide_banner { 
margin: 30px auto 0 auto;
}
.course-guide_banner a { 
display: inline-block;
width: 30%;
margin: 0 1% 30px 1%;
text-align: center;
}
.course-guide_banner .sp-img { 
display: none;
}

@media screen and (max-width: 767px) { 
.course_content { max-width: 600px; }
.course_content .title { display: block; }
.course_content .title img { height: 70px; margin-right: 0; margin-bottom: 20px; }
.course_content .title span { display: block; }
.course-guide_banner a { width: 47%; }
.course-guide_banner .pc-img { display: none; }
.course-guide_banner .sp-img { display: block; }
}
@media screen and (max-width: 500px) { 
.course-guide_banner a { display: table; width: 100%; max-width: 320px; margin: 0 auto 30px auto; }
.course_content .title { font-size: 20px; }
.course_content .title img { height: 50px; }
}



.course-tabs { 
display: flex; 
flex-wrap: wrap; 
max-width: 1000px; 
margin: 0 auto; 
}
.course-tabs .a-left { 
border-top-left-radius: 30px; 
border-bottom-left-radius: 30px; 
}
.course-tabs .a-right { 
border-top-right-radius: 30px; 
border-bottom-right-radius: 30px; 
}
.course-tab_label { 
position: relative; 
font-size: 24px; 
font-weight: bold;
text-align: center; 
color: #111;
background: #fff;
z-index: 1; 
cursor: pointer; 
flex: 1; 
padding: 15px 0; 
filter: drop-shadow(5px 5px 5px #ccc);
}
.course-tab_label:hover { 
opacity: 0.75; 
}
.course-tab_content { 
flex: 100%; 
display: none; 
overflow: hidden; 
}
input[name="tab_switch_c"] { 
display: none; 
}
.course-tabs input:checked + .course-tab_label { 
color: #fff; 
background: rgb(16,135,255); 
background: linear-gradient(76deg, rgba(16,135,255,1) 0%, rgba(2,185,255,1) 100%);
}
.course-tabs input:checked + .course-tab_label::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #1087ff transparent transparent transparent;
display: block;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
transition: all 0.3s ease 0s;
}
#tab01c:checked ~ #tab01c_content,
#tab02c:checked ~ #tab02c_content{ 
display: block; 
}
.course-tab_content { 
position: relative; 
animation: fadeIn 0.3s ease; 
}

@media screen and (max-width: 767px) { 
.course-tab_label { font-size: 3.5vw; }
}



/*====================================================================
about
====================================================================*/
.about_square_wrap { 
overflow: hidden;
margin-bottom: -100px;
}
.about_square_box { 
position: relative;
max-width: 1400px;
height: 270px;
margin: 0 auto;
}
.about_square_box .square_01 { 
position: absolute;
right: 0;
bottom: 0;
}

.about_square_wrap02 { 
margin-bottom: -110px;
}
.about_square_box02 { 
position: relative;
max-width: 1100px;
height: 110px;
margin: 0 auto;
}
.about_square_box02 .square_01 { 
position: absolute;
left: 0;
top: 0;
}

.about_square_wrap03 { 
overflow: hidden;
margin-top: 30px;
margin-bottom: -100px;
}
.about_square_box03 { 
position: relative;
max-width: 1400px;
height: 270px;
margin: 0 auto;
}
.about_square_box03 .square_01 { 
position: absolute;
right: 0;
bottom: 0;
}

.about_line_wrap { 
overflow: hidden;
margin-top: -30px;
margin-bottom: -50px;
}
.about_line_box { 
position: relative;
max-width: 1400px;
height: 180px;
margin: 0 auto;
}
.about_line_box .line_blue { 
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1400px) { 
.about_square_box .square_01 { right: -20px; }
.about_square_box02 .square_01 { right: -20px; }
.about_line_box.line_blue { left: -20px; }
}
@media screen and (max-width: 1300px) { 
.about_square_box .square_01 { right: -60px; }
.about_square_box02 .square_01 { right: -60px; }
.about_line_box .line_blue { left: -60px; }
}
@media screen and (max-width: 1200px) { 
.about_square_box .square_01 { right: -100px; }
.about_square_box02 .square_01 { right: -100px; }
.about_line_box .line_blue { left: -100px; }
}
@media screen and (max-width: 767px) { 
.about_square_box { height: 200px; }
.about_square_box .square_01 img { height: 200px; }
.about_square_box03 { height: 200px; }
.about_square_box03 .square_01 { right: -100px; }
.about_square_box03 .square_01 img { height: 200px; }
.about_line_box .line_blue { top: -20px; }
.about_square_wrap02 { margin-bottom: -60px; }
}



.about_back { 
background: url(../../renew2024/images-top/about_img_pc.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 260px;
}

.about_wrap { 
padding: 0 15px;
}

.about_content { 
max-width: 1200px;
margin: 0 auto;
}

.about_content .title_box { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto 50px auto;
}
.about_content .title_box .title { 
width: 49%;
}
.about_content .title_box .text_box { 
width: 49%;
margin-left: 2%;
}
.about_content .title_box .text_box h3 { 
font-size: 30px;
font-weight: bold;
margin-bottom: 15px;
}
.about_content .title_box .text_box p { 
margin: 0;
}

.about_content .banner-two { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 800px;
margin: 0 auto 50px auto;
}
.about_content .banner-two a { 
display: table;
width: 49%; 
filter: drop-shadow(5px 5px 5px #ccc);
}
.about_content .banner-two a:last-child { 
margin-left: 2%; 
}

.about_content .banner-three { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
.about_content .banner-three a { 
display: table;
width: 32%;
margin-right: 2%;
z-index: 1;
}
.about_content .banner-three a:last-child { 
margin-right: 0;
}
.about_content .banner-three .sp-img { 
display: none;
}

@media screen and (max-width: 767px) { 
.about_back { background: url(../../renew2024/images-top/about_img_sp.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 310px; }    
.about_content .title_box { display: block; max-width: 600px; }
.about_content .title_box .title { width: 100%; }
.about_content .title_box .title img { height: 70px; }
.about_content .title_box .text_box { width: 100%; margin-left: 0; margin-top: 30px; }
.about_content .title_box .text_box p .pc-text { display: none; }
.about_content .banner-two { display: block; max-width: 600px; }
.about_content .banner-two a { width: 100%; }
.about_content .banner-two a:last-child { margin-left: 0; margin-top: 30px; }
.about_content .banner-three { max-width: 600px; flex-direction: column; }
.about_content .banner-three a {  width: 100%; margin-right: 0; margin-bottom: 15px; }
.about_content .banner-three a:last-child { margin-bottom: 0; }
.about_content .banner-three .pc-img { display: none; }
.about_content .banner-three .sp-img { display: block; }
}
@media screen and (max-width: 500px) { 
.about_content .title_box .title img { height: 50px; }
.about_content .title_box .text_box h3 { font-size: 24px; }
}



/*====================================================================
obog
====================================================================*/
.obog_line_wrap { 
overflow: hidden;
margin-bottom: -50px;
}
.obog_line_box { 
position: relative;
max-width: 1250px;
height: 180px;
margin: 0 auto;
margin-right: 0;
}
.obog_line_box .line_white { 
position: absolute;
left: 0;
top: 0;
}

.obog_squar_wrap { 
overflow: hidden;
margin-top: -150px;
}
.obog_square_box { 
position: relative;
max-width: 1250px;
height: 240px;
margin: 0 auto;
margin-right: 0;
}
.obog_square_box .square_01 { 
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1400px) { 
.obog_line_box .line_white { left: -20px; }
.obog_square_box .square_01 { left: -20px; }
}
@media screen and (max-width: 1300px) { 
.obog_line_box .line_white { left: -60px; }
.obog_square_box .square_01 { left: -60px; }
}
@media screen and (max-width: 1200px) { 
.obog_line_box .line_white { left: -100px; }
.obog_square_box .square_01 { left: -100px; }
}
@media screen and (max-width: 767px) { 
.obog_line_box .line_white { top: -20px; }
.obog_square_box { height: 200px; }
}



.left_over {
overflow: hidden;
}
.left_wrap {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: auto;
}
.left_content {
width: 100vw;
margin-left: calc(50% - 50vw);
background: url(../../renew2024/images-top/parts/background_blue.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.left_box { 
max-width: 1200px;
margin: 0 auto;
margin-right: 0;
padding: 0 50px;
}

.left_box .title { 
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 1000px;
font-size: 24px;
font-weight: bold;
line-height: 1.2em;
color: #fff;
margin: 0 auto 30px auto;
}
.left_box .title img { 
margin-right: 30px;
}



.obog-btn_box {
display: flex;
justify-content: flex-end;
align-items: flex-start;
max-width: 360px;
margin: -30px auto 0 auto;
margin-right: 0;
padding-right: 60px;
}
.obog-btn_box a { 
position: relative;
z-index: 1;
}
.obog-swiper {
position: relative;
max-width: 1100px;
margin: 0 auto;
margin-right: 0;
overflow: hidden;
}
/* スライダー */
.swiper-slide { 
transition: all ease-in-out .3s;
transform: scale(0.8);
transform-origin: top right;    
}
.swiper-slide-active { 
transform: scale(1)!important;
padding-left: 20px;
}
.swiper-slide-prev { 
padding-right: 20px;    
}
/* ボタン */
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { 
width: 50px!important;  
opacity: 1!important;    
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { 
width: 50px!important;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { 
width: 50px!important;    
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
font-size: 20px!important;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { 
font-size: 20px!important;    
}
.swiper-button-prev:after, .swiper-button-next:after { 
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
background: rgba(0, 52, 140, 0.85);
}
.swiper-button-prev, .swiper-button-next {
z-index: 2!important;    
}



.left_content .sliderArea { 
display: none;
margin-bottom: 0; 
}
.left_content .slick-dots li.slick-active button:before { 
color: #f0b402;
opacity: 1;
}
.left_content .slick-dots li button:before { 
color: #fff;
opacity: 1;
}
.left_content .slick-slide { 
opacity: 1;
}
.left_content .slick-prev, .slick-next{
border-radius: 50%;
}
.left_content .sliderArea .list-btn { 
position: relative;
display: table;
max-width: 300px;
margin: 50px auto 0 auto;
z-index: 1;
}

@media screen and (max-width: 767px) { 
.left_box { padding: 0 15px; }
.left_box .title { display: block; max-width: 600px; margin: 0 auto 30px auto; }
.left_box .title img { height: 70px; margin-right: 0; margin-bottom: 20px; }
.left_box .title span { display: block; }
.obog-swiper { display: none; }
.obog-btn_box { display: none; }
.left_content .sliderArea { display: block; }
}
@media screen and (max-width: 500px) { 
.left_box .title { font-size: 20px; }
.left_box .title img { height: 50px; }
}



/*====================================================================
インフォメーション ニュース&JSCブログ
====================================================================*/
.info_square_wrap { 
overflow: hidden;
margin-top: -60px;
margin-bottom: -40px;
}
.info_square_box { 
position: relative;
max-width: 1400px;
height: 270px;
margin: 0 auto;
}
.info_square_box .square_01 { 
position: absolute;
left: 0;
bottom: 0;
}
.info_square_box .square_02 { 
position: absolute;
right: 0;
bottom: 0;
}

@media screen and (max-width: 1400px) { 
.info_square_box .square_01 { left: -20px; }
}
@media screen and (max-width: 1300px) { 
.info_square_box .square_01 { left: -60px; }
}
@media screen and (max-width: 1200px) { 
.info_square_box .square_01 { left: -100px; }
}
@media screen and (max-width: 767px) { 
.info_square_box { height: 200px; }
.info_square_box .square_01 img { height: 200px; }
.info_square_box .square_02 { right: -30px; }
}



.info-aria .info-back { 
position: relative;
max-width: 1300px; 
margin: 0 auto; 
}

.info-aria .info-back .title { 
position: absolute;
top: 20px;
left: 0;
opacity: 0.1;
overflow: hidden;
}
.info-aria .info-back .title .sp-img { 
display: none; 
}

.info-aria .info-wrap { 
padding: 120px 15px 0 15px; 
}

.entry article:not(:last-of-type) { 
border-bottom: 1px solid #111; 
}
.content_container { 
background: none;
}
.content_container article:nth-of-type(1) { 
border-top: 2px solid #111; 
}
.content_container article:nth-of-type(4) { 
border-bottom: 1px solid #111; 
}

.entry { 
max-width: 100%; 
margin: 30px 0 0 0 
}
.entry_thumb { 
display: none; 
}
.entry_content { 
margin-left: 0; 
}
.entry_title {
color: #111; 
}
.infolink a { 
position: relative;
z-index: 1;
background-image: none; 
color: #1e90ff; 
margin: 1em 0 0 0; 
padding-right: 0; 
padding-left: 15px; 
padding-bottom: 5px; 
border-bottom: 2px solid #1e90ff; 
}
    
.blog-tabs { 
display: flex; 
flex-wrap: wrap; 
max-width: 1000px; 
margin: 0 auto; 
}
.blog-tabs .a-left { 
border-top-left-radius: 30px; 
border-bottom-left-radius: 30px; 
}
.blog-tabs .a-right { 
border-top-right-radius: 30px; 
border-bottom-right-radius: 30px; 
}
.blog-tab_label { 
position: relative; 
font-size: 24px; 
font-weight: bold;
text-align: center; 
color: #111;
background: #fff;
z-index: 1; 
cursor: pointer; 
flex: 1; 
padding: 15px 0; 
filter: drop-shadow(5px 5px 5px #ccc);
}
.blog-tab_label:hover { 
opacity: 0.75; 
}
.blog-tab_content { 
flex: 100%; 
display: none; 
overflow: hidden; 
}
input[name="tab_switch_b"] { 
display: none; 
}
.blog-tabs input:checked + .blog-tab_label { 
color: #fff; 
background: rgb(16,135,255); 
background: linear-gradient(76deg, rgba(16,135,255,1) 0%, rgba(2,185,255,1) 100%);
}
.blog-tabs input:checked + .blog-tab_label::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #1087ff transparent transparent transparent;
display: block;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
transition: all 0.3s ease 0s;
}
#tab01b:checked ~ #tab01b_content,
#tab02b:checked ~ #tab02b_content{ 
display: block; 
}
.blog-tab_content { 
position: relative; 
animation: fadeIn 0.3s ease; 
}

@media screen and (max-width: 767px) { 
.info-aria .info-back .title .pc-img { display: none; }
.info-aria .info-back .title .sp-img { display: block; }
.info-aria .info-back .title img { width: 80px; }
.blog-tabs { max-width: 600px; }
.blog-tab_label { font-size: 3.5vw; }
}
@media screen and (max-width: 640px) { 
.entry_content { margin-left: 0!important; }
}




/*====================================================================
special
====================================================================*/
.special_back_01 { 
background: url(../../renew2024/images-top/parts/background_blue.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.special_back_02 { 
background: url(../../renew2024/images-top/special_backtitle.svg);
background-position: top 20px right;
background-repeat: no-repeat;
background-size: auto;
max-width: 1300px;
margin: 0 auto;
}

.special_wrap { 
padding: 0 15px;
}

.special_content { 
max-width: 1000px;
margin: 0 auto;
}

.special_content .title { 
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 16px;
font-weight: bold;
line-height: 1.2em;
color: #fff;
margin-bottom: 15px;
padding-top: 60px;
}
.special_content .title img {
margin-right: 30px;
}



.special_back_01 .sliderArea { 
margin-bottom: 0; 
padding-bottom: 80px; 
}
.special_back_01 .slick-dots li.slick-active button:before { 
color: #f0b402;
opacity: 1;
}
.special_back_01 .slick-dots li button:before { 
color: #fff;
opacity: 1;
}
.special_back_01 .slick-slide { 
opacity: 1;
}
.special_back_01 .slick-prev, .slick-next{
border-radius: 50%;
}

@media screen and (max-width: 767px) { 
.special_back_02 { background: none; }
}



/*====================================================================
official sns
====================================================================*/
.sns_square_wrap { 
overflow: hidden;
margin-top: -120px;
margin-bottom: -30px;
}
.sns_square_box { 
position: relative;
max-width: 1400px;
height: 270px;
margin: 0 auto;
}
.sns_square_box .square_01 { 
position: absolute;
right: 0;
top: 0;
}

@media screen and (max-width: 1400px) { 
.sns_square_box .square_01 { right: -20px; }
}
@media screen and (max-width: 1300px) { 
.sns_square_box .square_01 { right: -60px; }
}
@media screen and (max-width: 1200px) { 
.sns_square_box .square_01 { right: -100px; }
}
@media screen and (max-width: 767px) { 

}



.sns_back_01 { 
background: url(../../renew2024/images-top/parts/background_lightblue.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.sns_back_02 { 
position: relative;
background: url(../../renew2024/images-top/officialsns_backtitle.svg);
background-position: top 20px left;
background-repeat: no-repeat;
background-size: auto;
max-width: 1300px;
margin: 0 auto;
overflow: hidden;
}

.sns_wrap { 
padding: 120px 15px 0 15px;
}

.sns_content { 
max-width: 1200px;
margin: 0 auto;
}

.sns_content .insta_box { 
max-width: 1000px;
margin: 0 auto 60px auto;
}
.sns_content .insta_box .sub-title { 
text-align: center;
}
.sns_content .insta_box .sub-title h3 { 
font-size: 24px;
font-weight: bold;
line-height: 1.2em;
color: #111;
margin: 0!important;
}
.sns_content .insta_box .sub-title a { 
display: table;
margin: 0 auto;
margin-bottom: 30px;
color: #0066cc;
text-decoration: none!important;
}
.sns_content .insta_box .sub-title a img { 
display: block;
width: 70px;
margin: 10px auto;
}
.sns_content .insta_box .sub-title a span { 
display: block;
font-size: 16px;
font-weight: bold;
}



.sns_content .two_box { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto 60px auto;
}
.sns_content .two_box .sns_box { 
position: relative;
width: 47.5%;
}

.sns_content .break-point01 .two_box .sns_box:last-child { 
margin-left: 5%;
}
.sns_content .break-point01 .ml5 {
margin-left: 5%; 
}

.sns_content .break-point02 .two_box .sns_box:last-child { 
margin-left: 5%;
}

.sns_content .two_box .sns_box .square_01 { 
position: absolute;
top: 50px;
left: -50px;
}
.sns_content .two_box .sns_box .square_02 { 
position: absolute;
right: 0;
top: 30px;
}

.sns_content .two_box .sns_box .sub-title a { 
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 30px;
color: #0066cc;
text-decoration: none!important;
}
.sns_content .two_box .sns_box .sub-title a img { 
width: 70px;
}
.sns_content .two_box .sns_box .sub-title a .photo { 
margin-right: 15px;
}
.sns_content .two_box .sns_box .sub-title a h3 { 
font-size: 24px;
font-weight: bold;
line-height: 1.2em;
color: #111;
margin: 0!important;
}
.sns_content .two_box .sns_box .sub-title a span { 
display: block;
font-size: 16px;
font-weight: bold;
}
.sns_content .two_box .sns_box .sub-title .sp-img { 
display: none;
}

.sns_content .break-point02 .two_box { margin-bottom: 0; }

.sns_content .youtube-box {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.sns_content .youtube-box iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width: 767px) { 
.sns_back_02 { background: url(../../renew2024/images-top/officialsns_backtitle_02.svg); background-position: top 20px left; background-repeat: no-repeat; background-size: 80px; }
.sns_back_02 .main-title img { width: 80px; }
.sns_content .insta_box { max-width: 600px; }
.sns_content .break-point01 .two_box { max-width: 600px; flex-direction: column; }
.sns_content .break-point01 .two_box .sns_box { width: 100%; }
.sns_content .break-point01 .two_box .sns_box:last-child { margin-left: 0; margin-top: 60px; }
.sns_content .break-point01 .ml5 { margin-left: 0; margin-top: 60px; }
.sns_content .break-point02 .two_box { max-width: 600px; flex-direction: column-reverse; }
.sns_content .break-point02 .two_box .sns_box { width: 100%; }
.sns_content .break-point02 .two_box .sns_box:last-child { margin-left: 0; margin-bottom: 60px; }
.sns_content .two_box .sns_box .sub-title a { justify-content: center; }
.sns_content .two_box .sns_box .sub-title a .photo { display: none; }
.sns_content .two_box .sns_box .sub-title a span { text-align: center; }
.sns_content .two_box .sns_box .sub-title .sp-img { display: table; margin: 10px auto; }
.sns_content .two_box .sns_box .square_01 { top: 120px; }
.sns_content .two_box .sns_box .square_02 { top: 100px; }
}



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

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