/* CSS Document */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; height:100%;
}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.4rem; line-height:1.6em; margin:0 auto; font-weight:400; text-align:left;}
.center{ text-align:center;}

/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
header #menubtn{display:none;}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header { width:1400px; max-width:100%; margin:0 auto; position:relative; padding-bottom:15px;}
header .header_top{ display: flex; justify-content: space-between; align-items: flex-start; }
header .logo{ width:450px; padding:10px 0 10px 0px;}

header .nav_wrap{ width:100%; display: flex; justify-content:right; }
header nav {width:450px; max-width:80%; margin:25px 50px 0 auto;}
header ul.nav { display: flex; justify-content: space-between;}
header ul.nav li{ width:150px; font-size:1.6rem; line-height:1.4rem; padding:5px 10px; font-weight:500;}
header ul.nav li span{ font-size:1.2rem; display:block; font-family: 'Noto Sans JP', serif; margin-top:3px;}

#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px; position:absolute; right:0; top:0; z-index:2; box-sizing: border-box;}
#navi_toggle ul{ margin:60px 0 0 0; font-weight: 900;}
#navi_toggle ul li{ font-size:1.4rem; margin:0px 0 30px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul li span{ padding-left:10px;}


header .header-right{ width:calc(100% - 450px); display:flex; justify-content:right; flex-wrap:wrap;}
header .header-right .header-phone-block{ background:#fcfcfc; border:1px solid #dcdddd; padding:15px 20px;}
header .header-right .header-phone-block .tel{font-family: "Roboto", sans-serif; font-weight:700; font-size:clamp(2.2rem, 1.5056rem + 1.58vw, 3.4rem); line-height:1.2em; color:#0a3f87; position:relative; padding:5px 10px 5px 35px;}
header .header-right .header-phone-block .tel:before{ content:""; width:37px; height:37px; position:absolute; left:0; bottom:7px; background:url(../images/tel.svg) no-repeat; background-size:cover;}
header .header-right p{ font-size:1.4rem; line-height:1.2em; text-align:center;}
header .header-right .header-contact-block {  background:#0a3f87; color:#fff; padding:20px 30px; border:1px solid #0a3f87;}
header .header-right .header-contact-block a{ color:#fff;}
header .header-right .header-contact-block .contact_btn{ width:160px; margin:0 auto; font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); font-weight:700; line-height:1.2em; padding:20px 10px 5px 30px; position:relative;}
header .header-right .header-contact-block .contact_btn:before{ content:""; width:28px; height:22px; position:absolute; left:0; bottom:3px; background:url(../images/mail.svg) no-repeat; background-size:cover;}

@media screen and (max-width:1020px){
header .nav_wrap{ display:none;}
header #menubtn{ display:block;}
header .header_top{ display:block;}
header .header-right{ width:100%;}
header .header-right .header-phone-block{ width:50%; padding:15px 7px;}
header .header-right .header-contact-block{ width:50%; padding:15px 7px;}
header .header-right .header-phone-block .tel{ width:250px; max-width:100%; text-align:left; margin:0 auto;  padding:3px 6px 3px 30px;}
header .header-right .header-phone-block .tel:before{ content:""; width:30px; height:30px; position:absolute; left:0; bottom:2px; background:url(../images/tel.svg) no-repeat; background-size:cover;}
header .header-right .header-contact-block .contact_btn{  padding:15px 6px 3px 35px; text-align:left; }
header {padding-bottom:0px;}
header .logo{ padding:30px 0 20px 30px; max-width:65%;}
}

@media screen and (max-width: 400px){
header .header-right .header-phone-block .tel{ font-size:1.8rem;  padding:3px 6px 3px 20px;}
header .header-right .header-phone-block .tel:before{ content:""; width:25px; height:25px; position:absolute; left:0; bottom:0px; background:url(../images/tel.svg) no-repeat; background-size:cover;}
header .header-right p{ font-size:1.2em; line-height:1.2em;}
header .header-right .header-contact-block .contact_btn{ font-size:1.6rem;  padding:10px 6px 3px 30px; }
header .header-right .header-contact-block .contact_btn:before{ content:""; width:25px; height:18px; position:absolute; left:0; bottom:3px; background:url(../images/mail.svg) no-repeat; background-size:cover;}
}
@media screen and (max-width: 330px){
header .header-right .header-phone-block .tel{ font-size:1.4rem;  padding:3px 6px 3px 15px;}
header .header-right .header-phone-block .tel:before{ content:""; width:20px; height:20px; position:absolute; left:0; bottom:0px; background:url(../images/tel.svg) no-repeat; background-size:cover;}
header .header-right p{ font-size:1em; line-height:1.2em;}
header .header-right .header-contact-block .contact_btn{ font-size:1.4rem;  padding:10px 6px 3px 20px; }
header .header-right .header-contact-block .contact_btn:before{ content:""; width:15px; height:12px; position:absolute; left:0; bottom:3px; background:url(../images/mail.svg) no-repeat; background-size:cover;}
}

/*フッター*/
#footer_wrap { width:100%; max-width:100%; margin:0px auto 0; padding:40px 0; background:#0a3f87; color:#fff;}
footer{ width:1000px; max-width:95%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left;}
footer a{ color:#fff;}
footer .left_box{ width:40%; padding:0; margin:0;}
footer .left_box h1.logo{ margin-bottom:30px;}
footer .left_box h1.logo span{ display:block; margin:10px 0 5px; font-size:1.8rem; line-height:1.4em; font-weight:700;}
footer .left_box h2{ margin:15px 0 5px; font-size:1.4rem; line-height:1.2em;}
footer .left_box p{font-size:1.4rem; line-height:1.2em; font-weight:500;}
footer .left_box .tel{ font-size:1.4rem;  padding-left:20px; position:relative; margin-top:10px;}
footer .left_box .tel:before{ content:""; width:20px; height:20px; position:absolute; left:0; top:-3px; background:url(../images/tel.png) no-repeat; background-size:contain;}

footer .right_box{ width:60%; font-size:1.4rem; line-height:1.2em; padding:0; }
footer .right_box ul{ width:150px; margin:50px 0 0 auto;}
footer .right_box ul li{ text-align:left; padding:10px 25px;}
footer .right_box ul li span{ padding-left:5px;}
footer .right_box ul li.reserve_btn{margin:0 0 30px auto; text-align:center; padding:10px 10px;}
/*600以下 */
@media screen and (max-width: 600px){
#footer_wrap{ padding:30px 0;}
footer .left_box{ width:90%; padding:0; margin:0 auto;}
footer .logo img{ max-width:70%;}
footer .right_box{ width:100%;}
footer .right_box ul{margin:30px 0 ; }
footer .right_box ul li{ padding:8px 15px; text-align:left;}
footer .right_box ul li.reserve_btn{margin:0 0 30px 0;}

}

/*共通*/
h1.title{ width:480px; max-width:90%; margin:80px auto 40px; padding-bottom:5px; font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem); line-height:1.4em; font-weight:700; border-bottom:1px dotted #8a8a8a; }
h1.title span{ display:block; margin:5px auto;  color:#595857; font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); font-family: "Roboto", sans-serif; letter-spacing:0.05em; line-height:1.4em;}
.col_box{display:flex; justify-content:center; flex-wrap:wrap;}
.more_btn{ width:210px; margin:80px 0 0 auto; font-size:1.6rem; line-height:1.2em; position:relative; padding:20px 90px 20px 20px; text-align:right;}
.more_btn:after{ text-align:center; position:absolute; right:20px; top:50%; transition:0.3s; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); font-size:140%; line-height:44px; vertical-align:middle; content:"→"; display:block; width:48px; height:48px; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; background:#1D2B6F; color:#fff;}
.more_btn:hover:after{ right:10px; transition:0.3s;}
.wrap{ padding-bottom:50px;}
.mainimage{ width:100%; padding:400px 0 0 0; position:relative;}
@media screen and (max-width: 1400px){
.mainimage{padding:30% 0 0 0;}
}
@media screen and (max-width: 1000px){
.mainimage{padding:35% 0 0 0;}
}
@media screen and (max-width: 700px){
.mainimage{padding:45% 0 0 0;}
}
@media screen and (max-width: 500px){
.mainimage{padding:55% 0 0 0;}
}

.no_conents{ text-align:center; margin:150px auto; font-size:1.6rem;}


/* pagination */
.pagination {
  margin: 30px auto;
  font-size:1.6rem;
}

/* リンクの枠 */
.pagination .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

 /* 数字のリンク */
.pagination .nav-links .page-numbers {
  text-decoration: none;
  color: #333;
  display: inline-block;
  padding: 0.7em 0.7em;
  margin:0 2px;
  -webkit-transition: .3s;
  transition: .3s;
  border:1px solid #666;
}
.pagination .nav-links .page-numbers.dots{ border:none;}
/* 現在のページ */
.pagination .nav-links .current {
	background:#eee;
}

/* 現在のページとドット以外にホバーした時 */
.pagination .nav-links a:hover {
	border-bottom:1px solid #333;
} 



/*トップページ*/
#top .mainimage{ width:100%; padding:45% 0 0 0; background:url(../images/mainimage.jpg) no-repeat; background-size:cover; position:relative;}
#top .mainimage p{ color:#fff; font-size: clamp(2.4rem, calc(2.2rem + 1.2vw), 3.8rem); line-height:1.6em; font-weight:700; position:absolute; bottom:40px; left:40px; margin:auto; padding:20px;}
#top .mainimage p span{font-family: "Roboto", sans-serif; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem)}
#top .sec1 {background-image: linear-gradient(90deg, #14116e, #00469c 50%, #14116e); color:#fff; padding-bottom:180px;}
#top .sec1 p.text{ width:1100px; margin:3% auto; padding:8%; max-width:100%;  font-size:clamp(1.4rem, 1.168rem + 0.53vw, 1.8rem); line-height:3em; letter-spacing:0.05em; font-family: 'Noto Serif JP' , "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "游明朝", YuMincho, "MSP明朝","MS PMincho","MS 明朝",serif;}


@media screen and (max-width: 600px){
#top .mainimage{ width:100%; padding:65% 0 0 0; background:url(../images/mainimage.jpg) no-repeat; background-size:cover; position:relative;}
#top .mainimage p{ color:#fff; font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem); line-height:1.6em; position:absolute; bottom:20px; left:20px; padding:10px;}
#top .mainimage p span{ font-size:clamp(2rem, 1.3056rem + 1.58vw, 3.2rem);}
#top .sec1 p.text{ line-height:2em;}

}

#top .sec2 { background:#dcdddd; padding:10px 0 200px;}
#top .sec2 .acrylic_photo_list{ width:1200px; max-width:100%; margin:-200px auto 0; display:flex; justify-content:center; flex-wrap:wrap;}
#top .sec2 .acrylic_photo_list .acrylic_photo{ width:280px; max-width:calc(25% - 10px); margin:5px; box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.38);}


#top .sec3 {background-image: linear-gradient(90deg, #14116e, #00469c 50%, #14116e); padding:10px 0;}
#top .sec3>h1{ font-size:clamp(2.2rem, 1.5056rem + 1.58vw, 3.4rem); font-weight:700; line-height:1.4em; color:#fff; margin:100px auto;}
#top .sec3 .col_box{ width:1200px; max-width:100%; margin:0 auto;}
#top .sec3 .col_box div{ background:#fff; padding:20px; width:calc( 50% - 16px); margin:8px;}
#top .sec3 .col_box div:nth-of-type(1){ border-left:8px #0069b0 solid;}
#top .sec3 .col_box div:nth-of-type(2){ border-left:8px #78ad58 solid;}
#top .sec3 .col_box div:nth-of-type(3){ border-left:8px #00a48d solid;}
#top .sec3 .col_box div:nth-of-type(4){ border-left:8px #008bd1 solid;}
#top .sec3 .col_box div:nth-of-type(1) h2{ color:#0069b0; padding-left:80px;}
#top .sec3 .col_box div:nth-of-type(1) h2:before{ content:""; width:70px; height:55px; position:absolute; left:0; top:0; bottom:0; background:url(../images/top_icon1.png) no-repeat; background-size:cover;}
#top .sec3 .col_box div:nth-of-type(2) h2{ color:#78ad58; padding:20px 0 20px 100px;}
#top .sec3 .col_box div:nth-of-type(2) h2:before{ content:""; width:93px; height:80px; position:absolute; left:0; top:0; bottom:0; background:url(../images/top_icon2.png) no-repeat; background-size:cover;}
#top .sec3 .col_box div:nth-of-type(3) h2{ color:#00a48d; padding:20px 0 20px 60px;}
#top .sec3 .col_box div:nth-of-type(3) h2:before{ content:""; width:52px; height:63px; position:absolute; left:0; top:0; bottom:0; background:url(../images/top_icon3.png) no-repeat; background-size:cover;}
#top .sec3 .col_box div:nth-of-type(4) h2{ color:#008bd1; padding-left:90px;}
#top .sec3 .col_box div:nth-of-type(4) h2:before{ content:""; width:70px; height:63px; position:absolute; left:5px; top:0; bottom:0; background:url(../images/top_icon4.png) no-repeat; background-size:cover;}
#top .sec3 .col_box h2{ font-size:clamp(2rem, 1.3056rem + 1.58vw, 3.2rem); line-height:1.2em; font-weight:700; text-align:left; margin:30px 0; position:relative;}
#top .sec3 .col_box p{ padding:0 20px 10px; font-size:clamp(1.4rem, 1.168rem + 0.53vw, 1.8rem);}

#top .sec3 .promise{ width:1200px; max-width:95%; background:#fff; margin:70px auto; padding:10px 0 60px 0;}
#top .sec3 .promise h1.title{ margin-bottom:100px;}
#top .sec3 .promise_box{ width:950px; max-width:100%; margin:0 auto; display:flex; justify-content:center; flex-wrap:wrap; align-items: flex-start; border-bottom:1px solid #9f9fa0; padding:25px 0;}
#top .sec3 .promise_box .right_box{ width:calc(100% - 390px); padding:5px 30px;}
#top .sec3 .promise_box img{ width:380px; max-width:95%;  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.13);}
#top .sec3 .promise_box h2{ position:relative; font-size: clamp(2rem, 1.6368rem + 1.14vw, 3rem); font-weight:700; line-height:1.4em; text-align:left; margin:20px 0;}
#top .sec3 .promise_box h2 span{ font-family: "Roboto", sans-serif; color:#c9caca;  font-size:clamp(2.4rem, 2.1088rem + 1.58vw, 3.4rem); line-height:1em; padding:25px 0 5px calc(clamp(3.0rem, 1.6176rem + 4.32vw, 6.8rem) + 0.8em); display:block; position:relative;}
#top .sec3 .promise_box:nth-of-type(1) h2 span:before{ content:"01"; position:absolute; bottom:0; left:0; font-family: "Roboto", sans-serif; font-size:clamp(4.4rem, 3.528rem + 2.73vw, 6.8rem); color:#c9caca; font-weight:500; line-height:1.2em;}
#top .sec3 .promise_box:nth-of-type(2) h2 span:before{ content:"02"; position:absolute; bottom:0; left:0; font-family: "Roboto", sans-serif; font-size:clamp(4.4rem, 3.528rem + 2.73vw, 6.8rem); color:#c9caca; font-weight:500; line-height:1.2em;}
#top .sec3 .promise_box:nth-of-type(3) h2 span:before{ content:"03"; position:absolute; bottom:0; left:0; font-family: "Roboto", sans-serif; font-size:clamp(4.4rem, 3.528rem + 2.73vw, 6.8rem); color:#c9caca; font-weight:500; line-height:1.2em;}
#top .sec3 .promise_box:nth-of-type(3) { border-bottom:none;}
#top .sec3 .promise_box p{ letter-spacing:0.1em;}


@media screen and (max-width: 860px){
#top .sec3>h1{ margin:80px auto; max-width:90%;}
#top .sec3 .col_box{ display:block;}
#top .sec3 .col_box div{ background:#fff; width:600px; max-width:90%; margin:10px auto; padding:15px;}
#top .sec3 .col_box h2{margin:20px 0; }
#top .sec3 .promise_box{ display:block;}
#top .sec3 .col_box div:nth-of-type(1) h2{ padding-left:65px;}
#top .sec3 .col_box div:nth-of-type(1) h2:before{ content:""; width:60px; height:45px; position:absolute; left:0; top:0; bottom:0; background:url(../images/top_icon1.png) no-repeat; background-size:cover;}
#top .sec3 .col_box div:nth-of-type(2) h2{ padding:20px 0 0px 75px;}
#top .sec3 .col_box div:nth-of-type(2) h2:before{ content:""; width:70px; height:60px; position:absolute; left:0; top:0; bottom:0; background:url(../images/top_icon2.png) no-repeat; background-size:cover;}
#top .sec3 .col_box div:nth-of-type(3) h2{ color:#00a48d; padding:20px 0 0px 50px;}
#top .sec3 .col_box div:nth-of-type(3) h2:before{ content:""; width:47px; height:55px; position:absolute; left:0; top:0; bottom:0; background:url(../images/top_icon3.png) no-repeat; background-size:cover;}
#top .sec3 .col_box div:nth-of-type(4) h2{ color:#008bd1; padding:10px 0 0px 70px;}
#top .sec3 .col_box div:nth-of-type(4) h2:before{ content:""; width:60px; height:53px; position:absolute; left:5px; top:0; bottom:0; background:url(../images/top_icon4.png) no-repeat; background-size:cover;}
#top .sec3 .promise{ padding:10px 0; margin:70px auto 30px;}
#top .sec3 .promise_box .right_box{ width:500px; max-width:90%; padding:0px; margin:70px auto 10px;}
#top .sec3 .promise h1.title{ margin:50px auto;}

}
@media screen and (max-width: 820px){
#top .sec2 { padding:10px 0 100px;}
#top .sec2 .acrylic_photo_list{ width:500px; margin:-200px auto 0; display:flex; justify-content:center; flex-wrap:wrap;}
#top .sec2 .acrylic_photo_list .acrylic_photo{ width:220px; max-width:calc(50% - 10px); margin:5px; box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.38);}
}


@media screen and (max-width: 600px){
#top .sec2 { padding: 0 0px;}
#top .sec2 .acrylic_photo_list .acrylic_photo{ width:220px; max-width:50%; margin:0px; box-shadow:none;}
	}
@media screen and (max-width: 500px){
#top .sec3 .promise_box .right_box{ width:500px; max-width:90%; padding:0px; margin:30px auto 10px;}
#top .sec3 .promise_box h2 span{padding:0px 0 5px 0px;}
#top .sec3 .promise_box:nth-of-type(1) h2 span:before{ content:"01"; position:relative; display:block; font-family: "Roboto", sans-serif; font-size:clamp(4.4rem, 3.528rem + 2.73vw, 6.8rem); color:#c9caca; font-weight:500; line-height:1.2em;}
#top .sec3 .promise_box:nth-of-type(2) h2 span:before{ content:"02"; position:relative; display:block; font-family: "Roboto", sans-serif; font-size:clamp(4.4rem, 3.528rem + 2.73vw, 6.8rem); color:#c9caca; font-weight:500; line-height:1.2em;}
#top .sec3 .promise_box:nth-of-type(3) h2 span:before{ content:"03"; position:relative; display:block; font-family: "Roboto", sans-serif; font-size:clamp(4.4rem, 3.528rem + 2.73vw, 6.8rem); color:#c9caca; font-weight:500; line-height:1.2em;}
	}
@media screen and (max-width: 400px){
#top .sec3 .promise{ max-width:100%;}
#top .sec3 .col_box div{padding:10px;}
}


/*トップ ＝＝制作事例・お問い合わせ＝＝*/
#top .sec4{ width:1300px; max-width:100%; padding:100px 0; margin:0 auto;}
#top .sec4 .col_box { width:1070px; max-width:95%; margin:40px auto; display:flex; justify-content:center; flex-wrap:wrap; }
#top .sec4 .work-card{ width:335px; max-width:calc(50% - 20px); margin:10px;}
#top .sec4 .work-card h2{ text-align:left; padding:5px;}
#top .sec4 .work-img { position: relative; overflow: hidden; border-radius: 5px; aspect-ratio: 4/3; background: var(--gray-light); cursor: pointer; }
#top .sec4 .work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
#top .sec4 .work-img:hover img { transform: scale(1.07); }

#top .sec5{ width:1300px; max-width:100%; margin:0 auto; padding:50px 0; background:#0a3f87; display:flex; justify-content:center; flex-wrap:wrap}
#top .sec5 h1{ font-size: clamp(3.0rem, 1.6176rem + 4.32vw, 6.8rem); color:#c9caca; font-family: "Roboto", sans-serif;}
#top .sec5 .left_box{ padding:30px; text-align:left;}
#top .sec5 .left_box p{  font-size:clamp(1.4rem, 1.1824rem + 0.68vw, 2rem); color:#fff; line-height:1.4em; font-weight:700;}
#top .sec5 .right_box{ background:#fff; border-radius: 4px; -webkit-border-radius:13px; -moz-border-radius: 13px; -moz-border-radius: 13px; display:flex; justify-content:left; flex-wrap:wrap; align-items: flex-start; }
#top .sec5 .right_box h2{ font-size:clamp(1.8rem, 1.568rem + 0.53vw, 2.2rem); line-height:1.4em; margin:10px auto; font-weight:700;}
#top .sec5 .right_box .tel_box{ padding:20px 40px; margin:30px 0;}
#top .sec5 .right_box .tel_box .tel{font-family: "Roboto", sans-serif; font-weight:700; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem); line-height:1.2em; text-align:left; color:#0a3f87; position:relative; padding:0px 5px 0px 1.2em;}
#top .sec5 .right_box .tel_box .tel:before{ content:""; width:1.2em; height:1.2em; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem); position:absolute; left:0; bottom:0px; background:url(../images/tel.svg) no-repeat; background-size:cover;}
#top .sec5 .right_box .tel_box p{ line-height:1.4em; font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); padding-left:45px;}
#top .sec5 .right_box .contact_box{ padding:20px 50px; border-right:#8a8a8a dotted 1px; margin:30px 0;}
#top .sec5 .right_box .contact_btn{ width:250px; max-width:100%; display: grid; place-items: center; background:#3e3a39; -webkit-border-radius: 36px; -moz-border-radius: 36px; -moz-border-radius: 36px; position:relative; padding-left:1.6em; height:72px; font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); font-weight:700;}
#top .sec5 .right_box .contact_btn:before{ content:""; width:1.6em; height:1.2em; font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); position:absolute; left:25px; top:0; bottom:0; margin:auto; background:url(../images/mail.svg) no-repeat; background-size:cover;}
#top .sec5 .right_box a .contact_btn{ color:#fff;}
#top .sec5 .right_box .contact_btn:hover{ background:#0a3f87; transition:0.5s;}
@media screen and (max-width: 1220px){
#top .sec5 .left_box{ text-align:center;}
#top .sec4{ padding:60px 0;}

}
@media screen and (max-width: 800px){
#top .sec5 .right_box .tel_box{ padding:10px 20px; margin:20px 0;}
#top .sec5 .right_box .contact_box{ padding:10px 30px; margin:20px 0;}
}
@media screen and (max-width: 600px){
#top .sec5{ padding:20px 0; }
#top .sec5 .right_box{ display:block; max-width:90%;}
#top .sec5 .right_box .tel_box{ padding:20px 10px; margin:0 auto;}
#top .sec5 .right_box .contact_box{ padding:20px 20px; margin:0 auto; border-bottom:#8a8a8a dotted 1px; border-right:none; }
#top .sec4 .work-card{ max-width:calc(50% - 10px); margin:5px;}
#top .sec4{ padding:30px 0;}
}
@media screen and (max-width: 430px){
#top .sec4 .work-card{ width:335px; max-width:100%; margin:10px 0;}
}


/*トップ ＝＝ブログ＝＝*/
#top .sec6{width:1300px; max-width:100%; margin:0 auto; padding:40px 0 100px;}
#top .sec6 h2{ font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); line-height:1.2em; text-align:left; border-bottom:1px dotted #8a8a8a; padding:5px 10px; margin-bottom:10px;}
#top .sec6 p{ font-size:1.4rem; line-height:1.6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

#top .sec6 .blog-grid { width:1100px; max-width:95%; margin:40px auto; display:flex; justify-content:left; flex-wrap:wrap; margin-bottom: 24px; }
#top .sec6 .blog-card { max-width:calc(33% - 10px); margin:5px; padding-bottom:15px; background: #fff; border-radius: 5px; box-shadow: 0 1px 8px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; cursor: pointer; }
#top .sec6 .blog-card:hover { box-shadow: 0 6px 24px rgba(10,63,135,0.1); }
#top .sec6 .blog-thumb { aspect-ratio: 4/3; overflow: hidden; }
#top .sec6 .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
#top .sec6 .blog-card:hover .blog-thumb img { transform: scale(1.05); }
#top .sec6 .blog-body { padding: 18px 20px 22px; }
@media screen and (max-width: 600px){
#top .sec6 .blog-card { max-width:calc(50% - 10px); margin:5px;}
}


@media screen and (max-width: 430px){
#top .sec6 .blog-card{ width:335px; max-width:100%; margin:10px auto;}
}



/*   ======  会社概要   =======      */

#company .mainimage{ background:url(../images/company_mainimage.jpg) no-repeat center bottom; background-size:cover;}
#company p{ font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); padding:15px; letter-spacing:0.1em; line-height:2em;}

#company .philosophy{ padding:50px 0; background:#f2f2f3;}
#company .philosophy .contents{ width:1000px; max-width:95%; margin:30px auto; padding:50px 0; background:#fff;}
#company .philosophy .text{ width:720px; max-width:100%; margin:50px auto;}
#company .philosophy .photo img{ width:280px; max-width: calc(100% - 10px); margin:3px;}

#company .greeting { width:800px; max-width:90%; margin:0 auto ; padding:50px 0 100px;}
#company .greeting .text{ margin:50px auto;}
#company .greeting h2{  font-size:clamp(1.6rem, 1.368rem + 0.53vw, 2rem); line-height:1.2em; font-weight:700; text-align:left; margin:50px 0 10px; padding:10px; border-bottom:1px solid #CCCCCC;}
#company .greeting img { width: 200px; height: 200px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}

#company .greeting span.name{ text-align:right; display:block; margin:30px 0 0 auto;}


#company .profile{ padding:50px 0; background:#0a3f87;}
#company .profile .contents{ width:1200px; max-width:95%; margin:30px auto; padding:50px 0 100px; background:#fff;}
#company .history { padding:100px 0;}
#company .photo{ display:flex; justify-content: center; flex-wrap:wrap; margin:50px auto;}
#company .photo img{ width:380px; max-width: calc(100% - 20px); margin:10px;}
#company .profile .photo img{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#company dl.outline{ width:760px; max-width:90%; margin:50px auto; display:flex; justify-content:left; flex-wrap:wrap;}
#company dl.outline dt,#company dl.outline dd{ border-bottom:1px dotted #dcdddd; padding:10px 20px; text-align:left; font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); line-height:1.6em;}
#company dl.outline dt{ width:200px;}
#company dl.outline dd{ width:calc(100% - 200px);}
#company dl.outline dd:nth-last-of-type(1),#company dl.outline dt:nth-last-of-type(1) { border:none;}
#company .profile h2{ width:680px; max-width:90%; text-align:left; border-left:5px solid #221814; padding:5px; margin:60px auto 10px;}

.gmap {
position: relative;
width:680px;
padding-bottom: 35%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#company .history dl { width:830px; max-width:90%; margin:50px auto; display:flex; justify-content:left; flex-wrap:wrap;}
#company .history dl  dt,#company .history dl dd{ padding:10px 20px; text-align:left; font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); line-height:1.6em;}
#company .history dl  dt{ width:280px; display:flex; justify-content: right; flex-wrap:wrap;}
#company .history dl  dt span.date{ display:block; width:100px; letter-spacing:0.1em; margin:0 0 0 auto;}
#company .history dl  dt span.text{ display:block; width:80px; margin-right:30px; text-align:justify; text-align-last:justify;}
#company .history dl  dd{ width:calc(100% - 300px);}

@media screen and (max-width: 800px){
#company .philosophy{ padding:10px 0; }
#company .philosophy .contents{ padding:30px 0;}
#company .history{ padding:50px 0;}
#company .profile .contents{ padding:30px 0;}
#company .greeting{ padding:30px 0 50px;}
}

@media screen and (max-width: 600px){
#company dl.outline{ display:block}
#company dl.outline dt{ width:100%; padding:20px 20px 10px 20px;}
#company dl.outline dd{ width:100%; padding:15px 20px; border-bottom:1px solid #dcdddd;}

#company .history dl { display:block;}
#company .history dl  dt,#company .history dl dd{ padding:5px 20px 10px; text-align:left;}
#company .history dl  dt{ width:280px; padding:20px 20px 0; justify-content:left; }
#company .history dl  dt span.date{ width:100px;  margin:0;}
#company .history dl  dt span.text{ display:block; width:80px; text-align:justify; text-align-last:justify;}
#company .history dl  dd{ width:100%; border-bottom:1px solid #dcdddd;}

/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}


/*   ======  機械設備   =======      */
#equipment h1.title{ margin-top:120px;}

#equipment .mainimage{ background:url(../images/equipment_mainimage.jpg) no-repeat center bottom; background-size:cover;}

#equipment .equip_box{ width:800px; max-width:95%; margin:30px auto; display:flex; justify-content:left; flex-wrap:wrap; border:1px solid #CCC;}
#equipment .equip_box .photo{ width:400px; max-width:60%;}
#equipment .equip_box .right_box { padding:20px 30px;}
#equipment .equip_box .right_box h2{ font-size:clamp(1.8rem, 1.568rem + 0.53vw, 2.2rem); font-weight:700; line-height:1.4em; margin:20px 0; text-align:left;}

@media screen and (max-width: 700px){
#equipment .equip_box{display:block;}
#equipment .equip_box .photo{ width:100%; max-width:100%;}
#equipment .equip_box .right_box { padding:20px 30px;}

}



/*   ======  制作事例   =======      */
#works { background:#0a3f87; padding:0 0 10px 0;}
#works h1.title{ margin-top:100px;}
#works .mainimage{ background:url(../images/works_mainimage.jpg) no-repeat center center; background-size:cover;}
#works .sec1{ background:#fff; width:1200px; max-width:95%; margin:100px auto; padding:0px 0 50px 0;}
#works .contents{ width:1140px; max-width:100%; margin:0px auto 0; padding:20px;}
#works .works_wrap{ width:1080px; max-width:100%; margin:30px auto; display:flex; justify-content:left; flex-wrap:wrap;}
#works .works_box{ width:350px; max-width:calc( 33% - 8px); margin:0 4px 10px 4px; border-radius:8px; background:#222;}
#works .works_box h3{  font-size:1.4rem); text-align:left; padding:10px 15px; color:#fff;}
#works h2{ font-size:clamp(1.6rem, 1.368rem + 0.53vw, 2rem); line-height:1.6em; text-align:left; font-weight:600; margin:50px auto 10px;}
 
@media screen and (max-width: 760px){
#works .works_box{ max-width:calc( 50% - 8px);}
#works .sec1{ margin:60px auto;}
#works h1.title{ margin-top:60px;}

}

@media screen and (max-width: 440px){
#works .works_box{ max-width:100%; margin:0 auto 10px;}
#works .sec1{ margin:30px auto; max-width:100%;}

}


/*   ======  ブログ   =======      */
 
#blog_list{width:1300px; max-width:100%; margin:0 auto; padding:40px 0 100px;}
#blog_list h2{ font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); line-height:1.2em; text-align:left; border-bottom:1px dotted #8a8a8a; padding:5px 10px; margin-bottom:10px;}
#blog_list p{ font-size:1.4rem; line-height:1.6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

:is(#blog , #blog_list) .blog-grid { width:1100px; max-width:95%; margin:40px auto; display:flex; justify-content:left; flex-wrap:wrap; margin-bottom: 24px; }
:is(#blog , #blog_list) .blog-card { max-width:calc(33% - 10px); margin:5px; padding-bottom:15px; background: #fff; border-radius: 5px; box-shadow: 0 1px 8px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; cursor: pointer; }
:is(#blog , #blog_list) .blog-card:hover { box-shadow: 0 6px 24px rgba(10,63,135,0.1); }
:is(#blog , #blog_list) .blog-thumb { aspect-ratio: 4/3; overflow: hidden; }
:is(#blog , #blog_list) .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
:is(#blog , #blog_list) .blog-card:hover .blog-thumb img { transform: scale(1.05); }
:is(#blog , #blog_list) .blog-body { padding: 18px 20px 22px; }


#blog{width:1100px; max-width:100%; margin:0 auto; padding:40px 50px;}

#blog article{ width:1000px; max-width:90%; margin:20px auto;}
#blog article h1{  font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem); line-height:1.4em; padding:15px 25px; text-align:left; margin-bottom:10px;}
#blog article p{ width:90%; margin:10px auto; letter-spacing:0.05em; padding:10px 0;}
#blog h1.title2{ font-size:clamp(1.6rem, 1.368rem + 0.53vw, 2rem); line-height:1.4em; padding:5px 25px; text-align:left; border-bottom:1px dotted #666666; margin:100px auto 10px;} 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}


/*   ======  お問い合わせ   =======      */

:is(#contact , #thanks) .sec1{ width:1000px; max-width:90%; margin:60px auto 100px; font-size:1.6rem; line-height:1.6em;}
#contact p{ text-align:center;}

#contact dl{ width:900px; max-width:100%; margin:50px auto; display:flex; justify-content: space-between; flex-wrap:wrap; text-align:left;}
#contact dl dt{ width:320px; padding:20px 10px 20px 20px; border-bottom:1px solid #CCC;}
#contact dl dd{ width:calc(100% - 320px); padding:20px 20px 20px 10px; border-bottom:1px solid #CCC;}
#contact dl dd input,#contact dl dd textarea,#contact dl dd select{ background:#F7F7F5; padding:15px 10px; width:100%; border:none; font-size:1.6rem; line-height:1.4em;}
#contact dl dd.radio input,#contact dl dd.check input{ width:auto;}
#contact dl.trial_form dd.check .wpcf7-checkbox span{ width:100%; margin-bottom:10px;}

#contact dl dt span.must{ background:#003B82; color:#fff; font-size:1.4rem; padding:5px 10px; margin-right:10px;}
#contact dl dt span.nomust{ background:#CCCCCC; color:#000; font-size:1.4rem; padding:5px 10px; margin-right:10px;}
#contact .privacy_check{ width:100%; margin:20px auto 40px; text-align:center;}
#contact .privacy_check a{ text-decoration:underline;}
#contact p.check{ text-align:center; margin:40px auto;}
/*:is(#contact , #thanks) .step_wrap{ width:900px; max-width:100%; margin:0 auto; display:flex; justify-content:left; flex-wrap:wrap; border:1px solid #eae7db;}
:is(#contact , #thanks) .step_wrap div{ width:33.3%; padding:10px; font-size:1.6rem; line-height:1.4em; border-right:1px solid #eae7db;}
:is(#contact , #thanks) .step_wrap div:last-child{ border:none;}
:is(#contact , #thanks) .step_wrap div.act{ background: #F7F7F5;}
*/
#thanks p{ width:800px; max-width:100%; padding:50px 0; line-height:2em; font-size:1.6rem;}
#thanks h1.title{line-height:1.8em; }

#contact .btn_wrap{ width:550px; max-width:100%; margin:0 auto; display:flex; justify-content:center; flex-wrap:wrap;}
#contact .back_btn,#contact .send_btn,#contact .confirm_btn{width:180px; margin:10px 20px;}
#contact .confirm_btn{ margin:10px auto;}
#contact .back_btn input{ width:180px; background:#ccc; padding:15px; border:none; font-size:1.6rem; line-height:1.6em;  color:#fff;}
#contact .back_btn input:hover{ background:#666666;}
#contact .send_btn input,#contact .confirm_btn input{ width:180px; display:block; background:#797974; padding:15px; border:none; font-size:1.6rem; line-height:1.6em;  color:#fff; cursor:pointer; }
#contact .send_btn input:hover ,#contact .confirm_btn input:hover{ background:#333333;}

@media screen and (max-width: 740px){
#contact dl{ display:block; }
#contact dl dt{ width:100%; padding:20px 20px 5px;}
#contact dl dd{ width:100%; padding:20px; }
}
























#privacy { width:800px; max-width:90%; margin:60px auto;}
#privacy h2{ max-width:100%;  text-align:left; font-size:1.8rem; line-height:1.4em; margin:13px auto 16px;}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; text-align:left; margin:0 auto 5px;}
#privacy p{ max-width:100%; font-size:1.4rem; line-height:1.6em; text-align:left; margin-bottom:20px;}
#privacy .sec1 section{ margin-bottom:60px;}

@media screen and (max-width: 1033px){
}


@media screen and (max-width: 960px){


}
@media screen and (max-width: 900px){


}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
}






/*560以下 */
@media screen and (max-width: 560px){

h1.title{ margin:40px auto 20px;}




}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	
.spno2{ display:none;}






}