@charset "utf-8";

/*
 * File       : rwd-layout.css
 * Author     : STUDIO-JT (SUMI)
 * Guideline  : JTstyle.1.1
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01)
 */



/* **************************************** *
 * 1754px
 * **************************************** */
@media (max-width: 1754px){

	/* VISUAL */
	.main_visual_wrap:before {width:70%;}
    .main_visual_content {left: 74px; margin-left: 0;}
    .main_visual_content .wrap {margin: 0 auto;}
    .main_visual_wrap .main_visual_state {left: 74px; margin-left: 0;}

    /* SERVICE */

    /* SPACE */
	.main_space_content {padding:0 100px;}
	.main_space_content_inner b br {display:none;}

    /* MIELE */
	.main_miele_content {padding:0 100px;}

    /* BRAND STORY */
    .main_brand_story:before {height:43%; bottom: -43%;}

} /* 1754px */



/* **************************************** *
 * 1440px
 * **************************************** */
@media (max-width: 1440px){
    
	.main_inner_bg:before {font-size:650px;}
	.main_section_title h3 {font-size:50px;}

    /* VISUAL */
	.main_visual_item_video .main_visual_item_bg {width: 100%}
	.main_visual_item > figure {width: 100%}
	/* .main_visual_item_reels .main_visual_item_bg {width: 40%} */
	/* .main_visual_wrap {height:910px;} */
    /* .main_visual_content {top: 420px;} */
	.main_visual_content b {font-size:50px;}
	.main_visual_content p {font-size:20px;}
    /* .main_visual_item:not(.main_visual_item_reels) b {font-size: 80px;} */

    /* REELS */
    .main_reels_item {width: 32%;}

    /* SERVICE */
	.main_service_list .main_service_tit {font-size:24px;}

    /* SPACE */
    .main_space .main_space_typo {font-size:150px;}

    /* MIELE */
    .main_miele_content_inner b {font-size:50px;}

    /* BRAND STORY */
    .main_brand_story:before {height:38%; bottom: -38%;}

}


/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    .main_section_title h2 {font-size:18px;}
    .main_section_title h3 {font-size:45px;}

    .main_reels_item_profile { padding: 24px; }
    .main_reels_item_tag {padding: 24px 32px 24px 24px;}
    html.desktop .main_reels_item:hover .main_reels_profile_link {transform: translate(-5px, -8px);}
    html.desktop .main_reels_item:hover .main_reels_item_tag {transform: translate(-5px, 8px);}

    /* .main_visual_item:not(.main_visual_item_reels) b {font-size: 50px;} */

    /* REELS */
    .main_reels { padding-bottom: 180px; }
    .main_reels_item {width: 40%;}
    
    /* SERVICE */
	.main_service {padding: 167px 0 180px;}
	html.desktop .main_service_list .main_service_link:hover .main_service_thumb:before {border-width:30px;}

    /* BRAND STORY */
    .main_brand_story:before {height:25%; bottom: -25%;}

    /* SPACE */
    .main_space_content {padding:0 50px;}
    .main_space .main_space_typo {font-size:110px;}
    .main_space_content_inner b {font-size:45px;}

    /* MIELE */
    .main_miele_content {padding:0 50px;}
    .main_miele_content_inner b {font-size:45px;}

    /* REGISTER */
    .main_resister:before {width:40%; }
    .main_resister_contents_wrap {padding:0;}
	
	/* Instagram */
	.main_instaram_contents_wrap {padding:0;}
}


/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    .main_inner_bg:before {font-size:500px;}
	.main_section_title h2 {font-size:17px;}
	.main_section_title h3 {font-size:40px;}
    .main_section_title .sub_tit {font-size:22px;margin-top:24px;}

    /* VISUAL */
	.main_visual_wrap {height:100%}
	.main_visual_wrap:before {width:100%;}
    .main_visual_wrap .wrap {position:static;}
	.main_visual_wrap .btn_wrap {margin-top:20px;}
	.main_visual_wrap .btn_wrap a {padding-left:0; padding-right:0;}
	/* .main_visual_slider {padding-top:98px;} */
	.main_visual_slider:before {display:none;}
	/* .main_visual_item > figure {position:static; width:calc(100% - 60px); float:right;} */
	.main_visual_item > figure img {width: 125%; margin-left: -12.5%;}
	/* .main_visual_content {position:static; padding-top:80%;padding-bottom:90px;} */
    /* .main_visual_wrap .main_visual_state {bottom: 290px; left: 60px;}
	.main_visual_wrap .swiper_navigation {bottom: 290px; right: 60px;} */

    /* .main_visual_item_video .main_visual_item_bg {position:static; width:calc(100% - 60px); float:right;} */
    /* .main_visual_item_video .main_visual_item_bg iframe {left:auto; right:0;} */
    /*.main_visual_item_video .jt_fullvid_container {position:static; width:calc(100% - 60px); float:right;}*/
    .main_visual_item > figure,
    .main_visual_item_reels .main_visual_item_bg,
    .main_visual_item_video .main_visual_item_bg {top: 0; width: 100%; height: 60%;}

    .main_visual_content {background: #000; width: 100%;height: 40%; top: auto; bottom: 0; left: 0; padding: 120px 60px 0 60px;}
    .main_visual_content b > span br {display:none;}
    .main_visual_content b {font-size:40px;}
	.main_visual_content p {font-size:17px;}
    /* .main_visual_item:not(.main_visual_item_reels) b {font-size: 40px;} */
    .main_visual_item_video .main_visual_content {bottom: 0;}

    .main_visual_wrap .swiper_navigation {width: 115px; height: fit-content; left: auto; top: 65%; right: 60px;}
    .main_visual_wrap .swiper_navigation > button {width: auto; height: auto; top: 0;}
    .main_visual_wrap .main_visual_state {top: 64%; left: 60px;}

    .main_visual_item_reels .jt_fullvid_container .jt_fullvid {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}
    .main_visual_wrap .swiper-pagination {min-width: 130px; min-height: 10px; display:inline-block}
    
    
    /* REELS */
    .main_reels { padding-bottom: 160px; padding-top: 80px; }
    .main_reels_slider  {margin: 0;}
    .main_reels_inner { width: calc(100% - 120px); }
    .main_reels_item { margin: 0 30px 0 0; width: 55%; }
    .main_reels_item:last-child {margin: 0;}
    .main_reels_item_profile {padding: 20px;}
    .main_reels_item_tag_list { gap: 8px;}
    .main_reels_item_tag {padding: 20px 28px 20px 20px;}
    html.ios .main_reels_item_tag_list li {padding: 3px 13px 2px;}

    /* SERVICE */
	.main_service {padding: 147px 0 184px;}	
	.main_service_list .main_service_tit {font-size:22px;}
    .main_service .swiper-container {overflow:visible; padding-bottom:0;}
    .main_service .main_service_item {width:243px; margin:0 10px; padding-top:0;  transform:none !important;}
    .main_service_list .main_service_link {position:relative; transform:none !important;}
    .main_service .swiper-wrapper {margin-left:-10px;}
    .main_service_content .btn_wrap {margin-top:100px;}
    .main_service_list .main_service_content {margin-top:16px;}

    .main_service_list > div:nth-child(3n+1) {top:0;}
    .main_service_list > div:nth-child(3n-1) {top:0;}

    /* SPACE */
    .main_space {padding-bottom:100px; margin-right:0;}
    .main_space_typo_wrap { margin-bottom:40px;}
    .main_space .main_space_typo {font-size:80px;}
    .main_space_slider:before {display:none;}
    .main_space_item figure {overflow: hidden;}
    .main_space_content {position: static;padding: 0;-webkit-transform: none;transform: none;}
    .main_space_content_inner {margin-top:50px;}
    .main_space_content_inner b {color:#111; font-size:40px}
    .main_space .jt-btn__basic.jt-btn--type-02 {color:#111; padding-bottom:3px;}
    .main_space .jt-btn__basic.jt-btn--type-02 .icon_arrow:before {color:#111;}

    /* BRAND STORY */
    .main_brand_story {margin-top:0; padding: 150px 0 120px;}
    .main_brand_story:before { display:none;}
    .main_brand_story_txt p {font-size:15px;}
    .main_brand_story_list_wrap {margin:80px -40px 60px;}
    .main_brand_story_list > li { width:calc(33.33% - 20px); padding:0 10px; }

    /* MIELE */
    .main_miele {padding-bottom:100px; margin-right:0;}
    .main_miele_slider:before {display:none;}
    .main_miele_item figure {overflow: hidden;}
    .main_miele_content {position: static;padding: 0;-webkit-transform: none;transform: none; text-align:center;}
    .main_miele_content .wrap > span {color:#111; font-size:18px;}
    .main_miele_content_inner {margin-top:45px;}
    .main_miele_content_inner b {color:#111; font-size:40px}
    .main_miele_content_inner p {color:#111; font-size:15px;}
    .main_miele .jt-btn__basic.jt-btn--type-02 {color:#111;}
    .main_miele .jt-btn__basic.jt-btn--type-02 .icon_arrow:before {color:#111;}


    /* RESISTER */
    .main_resister {margin-top:0; padding:100px 0;}
    .main_resister:before {width:100%;height: 35%;bottom:auto;top:0;}
    .main_resister_contents_wrap {padding:0;display: block;}
    .main_resister_contents_wrap > div {width:100%;display:block;padding-left: 0;}
    .main_resister_contents_wrap .main_section_title {padding-top: 65%;text-align: center;}
    .main_resister_contents_wrap .main_section_title h3 br {display:none;}
    .main_resister_contents_wrap .main_section_title p br + br {display:none;}
    .main_resister_img_wrap {position:absolute;top:0;max-width:50%;-webkit-transform: translate(-50%);transform: translate(-50%);left: 50%;}
	
	/* INSTAGRAM */
	.main_section.main_instaram {padding-top:112px;}
	.main_instaram_contents_wrap .main_section_title h3 {text-indent:-2px;}

	
}



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

	.main_inner_bg:before {font-size:380px;}
    .main_section_title {margin-bottom:50px;}
	.main_section_title h2 {font-size:15px;}
	.main_section_title h3 {font-size:30px;}
    .main_section_title .sub_tit {font-size:18px; margin-top:15px;}

    /* VISUAL */
    /* .main_visual_slider {padding-top:111px;} */
	/* .main_visual_item > figure {width:calc(100% - 30px);} */
	/* .main_visual_content {position:static; padding-top:85%;padding-bottom:64px;} */
    .main_visual_content {padding: 90px 30px 0 30px;}
	.main_visual_content b {font-size:28px;}
	.main_visual_content p {margin-top: 7px; font-size:15px; line-height:1.7;}
    /* .main_visual_item:not(.main_visual_item_reels) b {font-size:28px;} */

	.main_visual_wrap .main_visual_state {/*bottom: 265px;*/ left:30px;}
	.main_visual_wrap .swiper_navigation {/*bottom: 259px;*/ right: 30px; width:75px;}
	.main_visual_wrap .btn_wrap {margin-top:37px;padding-top:2px;padding-bottom:2px;}

    /* .main_visual_item_video .main_visual_item_bg {width:calc(100% - 30px);} */

	html.ios .main_visual_wrap .btn_wrap {padding-top:3px;}
	html.android .main_visual_wrap .jt-btn__basic .icon_arrow:after {bottom:-13px;}

    /* REELS */
    .main_reels {padding-top: 60px; padding-bottom: 120px;}
    .main_reels_inner {width: calc(100% - 60px);}
    .main_reels_item {margin: 0 30px 0 0px;}
    .main_reels_item_tag_wrap {max-height: 105px;}
    .main_reels_item_tag.open .main_reels_item_tag_wrap {max-height: 150px;}

    html.mobile .main_reels_item::before {position: absolute; content: ''; height: 101%; width: 101%; background: rgba(0,0,0,0); z-index: 0; transition: background .3s;}
    html.mobile .main_reels_item.overlay::before {position: absolute; content: ''; height: 101%; width: 101%; background: rgba(0,0,0,.5); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}

	/* SERVICE */
    .main_service {padding: 98px 0 144px;}
    .main_space_typo_wrap { margin-bottom:20px;}
	.main_service_list .main_service_tit {font-size:20px;}
	.main_service_list .main_service_txt {font-size:15px; line-height:1.5;}
    .main_service_content .btn_wrap {margin-top:70px;}

    /* SPACE */
    .main_space {padding-bottom:87px;}
    .main_space .main_space_typo {font-size:70px;}
    .main_space_content_inner b {font-size:30px;}
    .main_space_item > figure {padding-top: 57.2%;}
    .main_space_item figure img {-o-object-fit: cover;object-fit: cover; height: 100%;}
    .main_space_content_inner {margin-top:40px;}

    /* BRAND STORY */
    .main_brand_story {padding-top:98px;padding-bottom:89px;}
    .main_brand_story_list_wrap {margin:35px 0 36px;}
    .main_brand_story_list > li {width:100%; padding: 0; margin-bottom:80px; }
    .main_brand_story_list > li:before {display:none;}
    .main_brand_story_list > li:last-child {margin-bottom:0;}
    .main_brand_story_txt b {font-size:20px; margin-top:25px;}

    /* MIELE */
    .main_miele {padding-bottom:93px;}
    .main_miele_item > figure {padding-top: 57.2%;}
    .main_miele_item figure img {-o-object-fit: cover;object-fit: cover;height: 100%;}
    .main_miele_content_inner {margin-top:40px;}
    .main_miele_content_inner b {font-size:30px;}
    .main_miele_content .wrap > span {font-size:15px;}

    /* RESISTER */
    .main_resister {padding-top:80px; padding-bottom:62px;}
    .main_resister:before{ height:28.3%}
    .main_resister_img_wrap {max-width:81%;}
    .main_resister_contents_wrap .main_section_title {padding-top:102%;}

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    .main_inner_bg:before {font-size:282px;}

    /* VISUAL */
    .main_visual {padding-top: 70px; max-height: 678px;}
    /* .main_visual_slider {padding-top: 70px;} */
	/* .main_visual_content { padding-top:90%;padding-bottom:34px;} */
    .main_visual_item > figure, 
    .main_visual_item_reels .main_visual_item_bg, 
    .main_visual_item_video .main_visual_item_bg {height: 48.3%;}
    .main_visual_content {height: 51.7%; top: 48.3%; padding:76px 30px 48px 30px;}
    .main_visual_content p {font-size: 18px; line-height: 1.5; padding-right: 30px;}
    .main_visual_content p > span br {display:none;}
    .main_visual_content b > span {text-wrap: balance;}

    /* .main_visual_item:not(.main_visual_item_reels) b {font-size: 36px; line-height: 1.16; margin-bottom: 10px;} */
    .main_visual_wrap .btn_wrap {margin-top: 26px;}
    .main_visual_wrap .swiper_navigation {width: 68px; top: 55.2%;}
    .main_visual_wrap .main_visual_state {top: 53.2%;}

    /* REELS */
    .main_reels {padding: 50px 0 98px;}
    .main_reels_item {width: 243px; margin: 0 20px 0 0px;}
    .main_reels_item:first-child.swiper-slide-active {margin-left: 10px;}
    .main_reels_inner {width: calc(100% - 40px);}
    .main_reels_item_profile {padding: 11px 16px; gap: 6px;}
    .main_reels_item_figure {width: 24px; height: 24px;}
    .main_reels_item_bg::after {background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5));}
    .main_reels_item_name span {font-size: 13px; display: block; vertical-align: middle;}
    .main_reels_item_tag {padding: 16px 19px 16px 16px;}
    .main_reels_item_tag_wrap {max-height: 80px;}
    html.android .main_reels_item_tag_wrap {max-height: 78px;}
    .main_reels_item_tag.open .main_reels_item_tag_wrap {max-height: 108px;}
    .main_reels_item_tag_list {gap: 5px 6px;}
    .main_reels_item_tag_list li {font-size: 12px; padding: 2px 6px 1px;}
    html.ios .main_reels_item_tag_list li {padding: 2px 6px 0px;}
    html.android .main_reels_item_tag_list li {padding: 1px 6px 1px;}
    .main_reels_item_tag_more {padding-top: 7px;}
    .main_reels_item_tag_more span {font-size: 12px; line-height: 1.3;}
    .main_reels_item_tag_more span::after {margin-left: 3px; top: 0px;}
    html.ios .main_reels_item_tag_more span::after {top: 2px;}
    html.android .main_reels_item_tag_more span::after {top: 3px;}
    .main_reels_item_tag.open .main_reels_item_tag_more span::after {top: -1px;}
    html.android .main_reels_item_tag.open .main_reels_item_tag_more span::after {top: 1px;}

    /* SERVICE */
    .main_service {padding-bottom:92px;}
    .main_section_title {margin-bottom:23px;}
	.main_section_title h2 {font-size:12px;margin-bottom:6px;}
	.main_section_title h3 {font-size:26px;}
    .main_section_title .sub_tit {font-size:16px;}
	.main_service_list .main_service_tit {font-size:18px;}
    .main_service_content .btn_wrap {margin-top:45px;}

    /* SPACE */
    .main_space .main_space_typo {font-size:56px;}
    .main_space_content_inner {margin-top:26px;}
    .main_space_content_inner b {font-size:26px; line-height:1.16;}

    /* BRAND STORY */
    .main_brand_story_list > li {margin-bottom:50px; }
    .main_brand_story_txt b {font-size:18px; margin-top:10px;}
    .main_brand_story_txt p {margin-top:9px;}
    .main_brand_story_icon svg {max-width:96px;}
    .main_brand_story_list > li:nth-child(2) svg {max-width:91px;}
    .main_brand_story_list > li:nth-child(3) svg {max-width:91px;}

    /* MIELE */
    .main_miele_content_inner {margin-top:27px;}
    .main_miele_content_inner b {font-size:26px;}
    .main_miele_content .wrap > span {font-size:12px; margin-bottom:8px;}

    /* RESISTER */
    .main_resister_contents_wrap .main_section_title h2 {margin-bottom:9px;}
    .main_resister_contents_wrap .main_section_title .btn_wrap {margin-top:25px;}
	
	/* INSTAGRAM */
	.main_section.main_instaram {padding-top: 95px;padding-bottom:149px;}
	.main_instaram_contents_wrap .main_section_title {margin-bottom:23px;}
    .main_instaram_wrap {width: 100vw;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;white-space: nowrap;font-size: 0;margin: 0 -30px;padding-left: 20px;}
    .main_instaram_wrap::-webkit-scrollbar {display: none;}
    .card-list__item {margin-bottom: 0;width: 260px;white-space: normal;display: inline-block;float: none;padding: 0 10px;}
    .card-list__item:last-child {margin-right: 20px;}


}