@charset "UTF-8";
/* CSS Document */
/*--------------------
01.top
02.case_study
03.company
04.business
05.recruit
06.contact
07.blog
07-01.blog_detail
08.error404
--------------------*/

@media only screen and (max-width:1024px){
/*-----------
01.top 1024
-----------*/
#top .main_visual_area .mv {
width: 88%;
}

#top .main_visual_area .contents_in {
bottom: 13%;
}

#top .main_visual_area .scroll_box {
margin-right: 25px;
}

#top .main_visual_area .contents_in .message_box {
padding: 50px 40px;
}

#top .main_visual_area .contents_in .message_box .ja {
font-size: 27px;
}

#top .main_visual_area .contents_in .message_box .txt {
margin-top: 20px;
}

#top .youtube_link{
padding-top: 70px;
}

#top .news_area .contents_in{
display: block;
}

#top .news_area .title_ptn01 {
width: 100%;
margin: 0 0 40px;
}

#top .news_area .news_list {
width: 100%;
}

#top .casestudy_area {
padding: 70px 0;
}

#top .casestudy_area .title_ptn02 .en {
font-size: 48px;
}

#top .casestudy_area .case_list .case_item .ttl {
font-size: 20px;
margin: 15px 0;
}

#top .blog_area .blog_list .blog_ttl {
font-size: 20px;
margin: 15px 0 0;
}


/*-------------
03.comapny 1024
-------------*/

/*-------------
04.business 1024
-------------*/
#business #cnt_area01 .cnt_box .cnt_text{
margin-top: 0;
width: 62.12%;
}

/*-------------
05.recruit 1024
-------------*/

/*-------------
06.contact(form_page) 1024
-------------*/

.form_page #attention_area{
padding: 30px 50px;
}

.form_page #attention_area .title{
font-size: 20px;
margin-bottom: 30px;
}

.form_page #attention_area p{
font-size: 16px;}


/*-------------
07.blog 1024
-------------*/


/*-------------
07-01.blog_detail 1024
-------------*/

}

@media only screen and (max-width:750px){
/*----------
01.top 750
----------*/
#top .main_visual_area{
padding-bottom: 100px;
}

#top .main_visual_area .mv.sp {
width: 94%;
background: url(../img/top/main_visual_sp.jpg) no-repeat center 28% /cover;
height: 450px;
margin: 0 auto 0 0;
}

#top .main_visual_area .contents_in{
bottom: 0;
left: 0;
transform: translateX(0);
width: 100%;
max-width: 730px;
padding-left: 20px;
}

#top .main_visual_area .scroll_box::after {
height: 55px;
}

#top .main_visual_area .scroll_box .scroll_text {
font-weight: 500;
}

#top .main_visual_area .scroll_box {
padding-left: 10px;
padding-top: 30px;
}

#top .main_visual_area .contents_in .message_box{
padding: 40px 20px;
margin: 0 0 0 auto;
}

#top .main_visual_area .contents_in .message_box .ja{
font-size: 18px;
margin-top: 10px;
}

#top .main_visual_area .contents_in .message_box .ja span{
display: inline-block;
}

#top .main_visual_area .contents_in .message_box .txt{
font-size: 14px;
line-height: 24px;
margin-top: 15px;
}

#top .main_visual_area .contents_in .message_box .txt span{
display: inline-block;
}

#top .news_area {
padding: 70px 0 35px;
}

#top .news_area .title_ptn01 {
margin: 0 0 30px;
}

#top .news_area .news_item{
display: block;
padding-bottom: 15px;
border-bottom: 1px solid #D9D9D9;
margin-bottom: 15px;
}

#top .news_area .news_item:last-child{
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}

#top .news_area .news_list .date{
font-size: 12px;
margin: 0 0 10px;
}

#top .news_area .news_list .news_ttl {
margin-bottom: 10px;
}

#top .news_area .news_list .news_txt a{
text-decoration: underline;
text-underline-offset: 3px;
}

#top .news_area .news_list .news_txt a:hover{
text-decoration: none;
}

#top .business_area{
padding: 35px 0 70px;
}

#top .business_area .contents_in{
display: block;
}

#top .business_area .cnt_img{
width: 100%;
margin: 0 auto 20px;
}

#top .business_area .cnt_text{
width: 100%;
margin: 0 auto;
}

#top .business_area .cnt_text .title_ptn01{
margin-bottom: 20px;
}

#top .business_area .cnt_text p{
font-size: 13px;
line-height: 2;
}

#top .business_area .cnt_text .btn_ptn01{
margin: 35px 0 0 auto;
}

#top .casestudy_area{
padding: 60px 0;
background-image: url(../img/top/bg_case_sp.jpg);
}

#top .casestudy_area .title_ptn02 .en {
font-size: 32px;
}

#top .casestudy_area .case_list{
padding-bottom: 75px;
}

#top .casestudy_area .case_list .case_item{
max-width: 335px;
margin: 0 15px;
}

#top .casestudy_area .case_list .case_item .cnt_text{
padding: 0;
}

#top .casestudy_area .case_list .case_item .ttl{
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
}

#top .casestudy_area .case_list .case_item .case_txt{
font-size: 12px;
line-height: 1.7;
}

#top .casestudy_area .case_list .slick-arrow{
bottom: 0;
}

#top .casestudy_area .case_list .slick-dots{
bottom: 20px;
}

#top .casestudy_area .btn_ptn01{
margin: 45px 0 0 auto;
}

#top .blog_area{
padding: 75px 0 100px;
}

#top .blog_area .title_ptn01{
margin-bottom: 35px;
}

#top .blog_area .blog_list{
padding-bottom: 75px;
}

#top .blog_area .blog_list .blog_item{
max-width: 335px;
margin: 0 15px;
}

#top .blog_area .blog_list .blog_ttl{
font-size: 16px;
line-height: 1.5;
padding: 0;
margin: 10px 0 0;
}

#top .blog_area .blog_list .slick-arrow{
bottom: 0;
}

#top .blog_area .blog_list .slick-dots{
bottom: 20px;
}

#top .blog_area .btn_ptn01{
margin: 45px 0 0 auto;
}


/*-----------------
02.case_study 750
-----------------*/
#case_study .cnt_area{
padding-bottom: 100px;
}

#case_study .case_list{
max-width: 600px;
margin: 0 auto;
}

#case_study .case_list .case_item{
width: 50%;
margin-bottom: 35px;
}

#case_study .case_list .case_item .cnt_text{
padding: 15px 9px 0;
}

#case_study .case_list .case_item .ttl{
font-size: 14px;
margin-bottom: 10px;
}

#case_study .case_list .case_item .case_txt{
font-size: 12px;
line-height: 20px;
}

/*-------------
03.comapny 750
-------------*/
#company .cnt_area{
padding-bottom: 100px;
}

#company .cnt_area .table_ptn01{
font-size: 14px;
line-height: 28px;
}

#company .cnt_area .table_ptn01 th{
width: 30%;
padding: 12px 10px 12px 15px;
}

#company .cnt_area .table_ptn01 td{
width: 70%;
padding: 12px 10px 12px 15px;
}

#company .cnt_area .cnt_g{
margin-top: 70px;
}

#company .cnt_area .cnt_g .title_ptn02 .en{
font-size: 32px;
line-height: 40px;
}

#company .cnt_area .cnt_g .title_ptn02 .ja{
font-size: 14px;
}

#company .cnt_area .cnt_g .title_ptn02{
margin-bottom: 16px;
}

#company .cnt_area .cnt_g .map iframe{
height: 240px;
}

/*-------------
04.business 750
-------------*/
#business .cnt_area{
padding-bottom: 50px;
}

#business #cnt_area01 .title_ptn02{
margin-bottom: 20px;
}

#business #cnt_area01 .title_ptn02 .en{
font-size: 32px;
line-height: 40px;
}

#business #cnt_area01 .title_ptn02 .ja{
font-size: 14px;
}

#business #cnt_area01 .first_text{
font-size: 16px;
}

#business #cnt_area01 .cnt_box{
display: block;
}

#business #cnt_area01 .cnt_box .cnt_text{
max-width: none;
width: 100%;
}

#business #cnt_area01 .cnt_box .cnt_img{
max-width: none;
width: 100%;
margin: 0 auto 12px;
}

#business #cnt_area01 .cnt_box .step_box{
font-size: 12px;
width: 38px;
margin-right: 14px;
}


#business #cnt_area01 .cnt_box .step_number{
font-size: 28px;
}

#business #cnt_area01 .cnt_box .step_number::before{
width: 18px;
}

#business #cnt_area01 .cnt_box h3{
width: calc(100% - 52px);
font-size: 18px;
line-height: 30px;
}

#business #cnt_area01 .cnt_box .cnt_text p{
font-size: 14px;
}

/****** #business #cnt_area02 ******/
#business #cnt_area02 {
  padding-bottom: 100px;
}
.mortar__ttl {
  font-size: 26px;
  margin-bottom: 30px;
}
.mortarList {

}
.mortarList__item {
  display: block;
}
.mortarList__item + .mortarList__item {
  margin-top: 40px;
}
.mortarList__img {
  max-width: inherit;
  width: 100%;
  margin-bottom: 15px;
}
.mortarList__img img {
  aspect-ratio: 370/237;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.mortarList__cont {
  max-width: inherit;
  width: 100%;
}
.mortarList__ttl {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.777;
}
.mortarList__txt {
  margin-top: 8px;
  line-height: 1.714;
}

/*-------------
05.recruit 750
-------------*/
#recruit .cnt_area{
padding-bottom: 100px;
}

#recruit .cnt_area .title_ptn01{
margin-bottom: 20px;
}

#recruit #cnt_area01 .title{
font-size: 24px;
line-height: 50px;
letter-spacing: 0.02em;
}

#recruit #cnt_area01 p{
text-align: left;
}

#recruit #cnt_area02 .scene_g li,#recruit #cnt_area02 .scene_g li:nth-child(5n){
max-width: none;
width: 31.33%;
margin: 0 3% 10px 0;
}

#recruit #cnt_area02 .scene_g li:nth-child(3n){
margin-right: 0;
}

#recruit #cnt_area03 .table_ptn01{
font-size: 14px;
line-height: 28px;
}

#recruit #cnt_area03 .table_ptn01 th{
width: 30%;
padding: 12px 10px;
}

#recruit #cnt_area03 .table_ptn01 td{
width: 70%;
padding: 12px 10px 12px 15px;
}

/*-------------
06.contact(form_page) 750
-------------*/
.form_page .cnt_area{
padding-bottom: 100px;
}

.form_page #attention_area{
padding: 30px 20px;
}

.form_page #attention_area .contents_in{
width: 100%;
}

.form_page #cnt_area01 .first_text{
font-size: 16px;
}

.form_page #cnt_area01 .dl_ptn01 .dl_box{
display: block;
}

.form_page #cnt_area01 .dl_ptn01 dt{
width: 100%;
padding: 20px 10px 0;
}

.form_page #cnt_area01 .dl_ptn01 dd{
width: 100%;
padding: 12px 10px 20px;
}

.form_page #cnt_area01 .privacy_box{
padding: 30px 20px;
}

/*-------------
07.blog 750
-------------*/

#blog .blog_list{
display: block;
padding-bottom: 0;
}

#blog .blog_list .blog_item{
width: 100%;
margin: 0 auto 40px;
}


/*-------------
07-01.blog_detail 750
-------------*/

#blog_detail #cnt_area01 .cnt_block .title_ptn03 .ja{
font-size: 24px;
line-height: 32px;
}

#blog_detail #cnt_area01 .cnt_block .date_text{
margin-bottom: 50px;
}

#blog_detail #cnt_area01 .blog_content{
margin-bottom: 60px;
}

#blog_detail #cnt_area01 .blog_content h2{
font-size: 20px;
letter-spacing: 0.04em;
margin-bottom: 12px;
}

#blog_detail #cnt_area01 .blog_content h2::before{
width: 35%;
}

#blog_detail #cnt_area01 .blog_content h3{
margin-bottom: 12px;
}

#blog_detail #cnt_area01 .blog_content p{
font-size: 14px;
margin-bottom: 12px;
}

#blog_detail #cnt_area01 .blog_content p + h2, #blog_detail #cnt_area01 .blog_content p + h3{
margin-top: 30px;
}

#blog_detail #cnt_area01 .blog_content figure{
margin: 20px 0;
}

#blog_detail #cnt_area01 .btn_ptn01{
margin-bottom: 100px;
}

/*-------------
08.error404 750
-------------*/
#error404 .cnt_area{
padding: 100px 0 80px;
}

#error404 .cnt_area p{
margin: 30px auto 40px;
}





}

@media only screen and (max-width:360px){
/*----------
01.top 360
----------*/
#top .main_visual_area .contents_in .message_box .txt {
font-size: 13px;
}

#top .casestudy_area .case_list .case_item{
max-width: 280px;
}

#top .blog_area .blog_list .blog_item{
max-width: 280px;
}

}