@charset "UTF-8";

/*
Theme Name: hamaken
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.5.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
@import url('./layout.css');

:root{
	--global--color--white: #ffffff;
	--global--color--navy: #383e54;
	--global--color--orange: #e56220;
	--global--color--beige: #a58e62;
	--global--color--beige02: #eae7e1;
	--global--color--black: #333333;
	--global--color--gray: #333333;
	--global--color--branch: #e9e6e0;
	--global--color--beige--bg: #d2c9b5;
	--global--color--deepbeige: #564a34;

	--global--ff--mincho: "Zen Old Mincho", serif;
	--global--ff--shippori: "Shippori Mincho", serif;

	--global--fw--medium: 500;
	--global--fw--bold: 700;

	--global--header--height--sp: 6rem;

    --header--menu: 6rem;
    --header--sp: 6rem;

	--header--height: 9.5rem;

    --header--menu--line: 2rem;
}

body{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  color: var(--global--color--gray);
}

section{ position: relative; }

.anchor{ position: absolute; margin-top: -20rem; padding-top: 20rem; }


.inner{ max-width: 124rem; padding: 0 1.5rem; margin: 0 auto; }
.inner-mini{ max-width: 110rem; padding: 0 1.5rem; margin: 0 auto; }
.inner-news,
.inner-contacts{ max-width: 79rem; padding: 0 1.5rem; margin: 0 auto; }
.inner-company{ max-width: 90rem; padding: 0 1.5rem; margin: 0 auto; }
.inner-works{ max-width: 100rem; padding: 0 1.5rem; margin: 0 auto; }


.thumbnails-wrapper{ padding-top: 7rem; }

.slick-initialized .slick-slide{ aspect-ratio: 1 / 1; }
.slick-initialized .slick-slide img{ width: 100%; height: 100%; object-fit: cover; }
.slick-prev{ left: 0; z-index: 1; width: 5rem; height: 9.5rem; }
.slick-next{ right: 0; z-index: 1; width: 5rem; height: 9.5rem; }

.slick-prev:before{ content: ""; position: absolute; left: 0; top: 0; background: url('./assets/images/front/arrow_l.svg') no-repeat 0 0 / 5rem; width: 5rem; height: 9.5rem; }
.slick-next:before{ content: ""; position: absolute; right: 0; top: 0; background: url('./assets/images/front/arrow_r.svg') no-repeat 0 0 / 5rem; width: 5rem; height: 9.5rem; }

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.mincho {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.midashi{ text-align: center; font-weight: 500; color: var(--global--color--gray); font-size: 3.5rem; line-height: 1.4; }
.midashi span{ display: block; font-family: var(--global--ff--mincho); color: var(--global--color--beige); font-size: 1.4rem; }

.texts{ text-align: center; padding: 1rem 0; line-height: 2.1; color: var(--global--color--gray); }



.branch{ height: 4.7rem; background-color: var(--global--color--branch); }
.branch ul{ display: flex; align-items: center; }
.branch ul li a{ display: flex; align-items: center; height: 4.7rem; }
.branch ul *{ font-size: 1.3rem; }

.branch ul li:not(:last-child){
	padding-right: 2.4rem;
	margin-right: 1rem;
	background: url('./assets/images/common/arrow02.svg') no-repeat 100% 50% / 1.4rem auto;
}



/*

	under

*/
.page-title{
	background-color: var(--global--color--navy);
	min-height: 36rem;
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}
.page-title .title{
	padding-top: 3.5rem;
	color: var(--global--color--white);
	font-size: 3.9rem;
	overflow: hidden;
}
.page-title::after{
	content: "";
	color: var(--global--color--beige);
	position: absolute;
	line-height: 1;
	left: 0;
	bottom: -.5rem;
	font-size: 8.5rem;
	font-family: var(--global--ff--shippori);
}





footer{
	background-color: var(--global--color--navy);
}
footer *{
	color: var(--global--color--white);
}

footer .footer-inner{
	max-width: 110rem;
	padding: 5rem 1.5rem 7rem;
	margin: 0 auto;
}

footer .footer-inner-inbox{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
footer ul{
	display: flex;
}
.globalMenuSp .contact a,
.globalMenuSp .contact a:hover,
.globalMenuSp .contact a:visited,
.globalMenuSp .contact a:focus,
footer a,
footer a:hover,
footer a:visited,
footer a:focus{
	color: var(--global--color--white);
}

footer .copyright{
	display: block;
	text-align: right;
	font-size: 1rem;
}

footer .comapny{
	font-size: 1.9rem;
}
footer .address{
	font-size: 1.3rem;
}
footer .footer-menu{
	margin-top: 6rem;
	display: flex;
}
footer .footer-menu ul{
	flex-direction: column;
}
footer .footer-menu ul:first-child{
	margin-right: 5rem;
}
footer .footer-menu ul li a{
	display: block;
	padding: .5rem 0;
	color: var(--global--color--white);
	font-size: 1.3rem;
}

footer .footer-menu ul li.u a{
	padding-left: 2rem;
	background: url('./assets/images/common/under.svg') no-repeat 0 50% / 1rem auto;
}


.globalMenuSp .tel a{
	color: var(--global--color--white);
}


.globalMenuSp .tel,
footer .tel{
	text-align: center;
}
.globalMenuSp .tel a,
footer .tel a{
	font-size: 2.8rem;
}
.globalMenuSp .tel a i,
footer .tel a i{
	font-size: 2.2rem;
}

.globalMenuSp .contact a,
footer .contact a{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	background-color: var(--global--color--orange);
	padding: 0 5rem;
	border-radius: 5rem;
}

footer i{
	margin-right: 1rem;
}

footer .footer-right{ margin-bottom: 2rem; }

.globalMenuSp .contact,
footer .footer-right .contact{ margin-top: 1.5rem; }

footer ul.sns{ justify-content: flex-end; margin-top: 3.5rem; }
footer ul.sns li:not(:last-child){ margin-right: 1.5rem !important; }
footer ul.sns li{ text-align: center; }
footer ul.sns li i{ font-size: 1.9rem; }


header{
	position: fixed;
	width: calc(100% - 5rem);
	top: 2.5rem;
	left: 2.5rem;
	background-color: var(--global--color--white);
	height: var(--header--height);
	border-radius: .8rem;
	z-index: 100;
}
header .header-inner{
	display: flex;
	justify-content: space-between;
}
.header-menubox,
header .header-inner ul{
	display: flex;
}
header .header-inner .header-menubox .menu a{
	display: flex;
	height: 9.5rem;
	align-items: center;
	padding: 0 .8rem;
}
header .header-inner .header-menubox .contacts{
	margin-right: 2rem;
}
header .header-inner .header-menubox .contacts a{
	display: flex;
	height: 9.5rem;
	align-items: center;

}
header .header-inner .header-menubox .contacts li.tel{
	margin: 0 3rem;
}
header .header-inner .header-menubox .contacts li.tel a{
	font-size: 2.4rem;
}
header .header-inner .header-menubox .contacts li.tel a i{ font-size: 1.6rem; margin-right: .5rem; }

header .header-inner .header-menubox .contacts li.contact a span{
	display: flex;
	justify-content: center;
	color: var(--global--color--white);
	background-color: var(--global--color--orange); align-items: center; height: 4.5rem; width: 20rem; border-radius: 5rem; }

header .header-inner .header-menubox .contacts li.contact a span i{ margin-right: .5rem; }
header .header-inner .header-menubox .contacts li.contact a span img{ margin-left: 1.2rem; }
a img.arrow{ width: 1.9rem; }



header .header-inner .logo a strong{ width: 8.5rem; }
header .header-inner .logo a{ display: flex; align-items: center; justify-content: center; height: 9.5rem; padding: 0 0 0 1.5rem;  }
header .header-inner .logo a span{ font-size: 1.4rem; display: flex; flex-direction: column; }
header .header-inner .logo a span img{ width: 12.4rem; margin-top: .3rem; }

/*-----

	front

-----*/

section.main{ width: 100%; height: 100vh; overflow: hidden; position: relative; }
section.main img{ width: 100%; height: 100%; object-fit: cover; }

section.main .catch{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; top: 0; left: 0; color: var(--global--color--white); font-weight: 700; }
section.main .catch .mini{ font-size: 3rem; }
section.main .catch .point{ font-size: 3.4rem; }
section.main .catch .point strong{ font-size: 4.4rem; }



/*---------- ABOUT ----------*/
section.about{ padding: 20rem 0 10rem; position: relative; }
section.about .texts{ margin-top: 2rem; }


section.about::before{
	content: "HAMAKEN";
	font-size: 8.4rem;
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
	position: absolute;
	top: 2rem;
	left: 0;
	color: #d3cab6;
	line-height: 1;
}
section.about .button{ margin-top: 2.5rem; }
section.about .button a{ width: 20.5rem; }



/*---------- SERVICE ----------*/
section.service{ padding: 8rem 0 10rem; background: url('./assets/images/front/bg02.webp') no-repeat 50% 50% / cover; }
section.service .button a img{ margin-left: 2.5rem; }
section.service .service-box{ margin: 4rem 0 4.5rem; display: flex; justify-content: space-between; }
section.service .service-box a{ background-color: var(--global--color--white); width: calc(32% - 8rem); padding: 4rem; }
section.service .service-box a dl dt{ text-align: center; font-size: 2.6rem; line-height: 1.6; color: var(--global--color--beige); font-weight: 700; }
section.service .service-box a dl dd{ text-align: center; font-size: 1.5rem; }
section.service .service-box a dl dd.arrow{ display: flex; height: 7.5rem; justify-content: center; align-items: center; }



section.works{ padding-top: 10rem; }




.button ul{ display: flex; justify-content: center; align-items: center; }
.button ul li:not(:last-child){ margin-right: 3rem; }
.button ul li a{ display: flex; align-items: center; justify-content: space-between; height: 4.4rem; background-color: var(--global--color--navy); color: var(--global--color--white); border-radius: 5rem; padding: 0 2rem; }





.bg-wrapper{ background: url('./assets/images/front/bg.webp') no-repeat 0 0 / cover; }



/*

	Message

*/


main.message .page-title::after{ content: "MESSAGE"; }
main.message .message-box01{ padding: 10rem 0 14rem }
main.message .message-box01 .tit{ text-align: center; font-size: 2.3rem; color: var(--global--color--navy); font-weight: var(--global--fw--medium); margin-bottom: 1.5rem; }
main.message .message-box01 .txt{ text-align: center; padding: 2.5rem 0; }
main.message .message-box01 .point{ text-align: center; }
main.message .message-box01 .point *{ background-color: var(--global--color--beige--bg); border-radius: 5rem; padding: 2rem 3rem; display: inline-block; font-size: 2.3rem; color: var(--global--color--deepbeige); }

main.message .message-box02 .midashi{ background-color: var(--global--color--navy); padding: 3rem 0 2.5rem; color: var(--global--color--white); border-bottom: #a48d62 .6rem solid; }


main.message .message-box02 .features{
	min-height: 47.2rem;
	display: flex;
	align-items: center;
}


main.message .message-box02 .features01{
	background: url('./assets/images/message/features01.webp') no-repeat 100% 50% / auto 47.2rem;
}
main.message .message-box02 .features02{
	background: url('./assets/images/message/features02.webp') no-repeat 0% 50% / auto 47.2rem;
}
main.message .message-box02 .features03{
	background: url('./assets/images/message/features03.webp') no-repeat 100% 50% / auto 47.2rem;
}


main.message .message-box02 .textbox{
	max-width: 55rem;
}


main.message .message-box02 .features .inner{
	padding: 10rem 0;
	width: 100%;
	max-width: 115rem;
}



main.message .message-box02 .tit::before{ content: ""; font-size: 9.7rem; left: 0; top: 0; color: var(--global--color--beige--bg); font-family: var(--global--ff--shippori); font-weight: var(--global--fw--medium); position: absolute; z-index: -1; left: -2rem; top: -10.5rem; }

main.message .message-box02 .features01 .tit::before{ content: "01"; }
main.message .message-box02 .features02 .tit::before{ content: "02"; }
main.message .message-box02 .features03 .tit::before{ content: "03"; }


main.message .message-box02 .features02 .textbox{ margin-left: auto; }

main.message .message-box02 .features .txt{ font-size: 1.5rem; }
main.message .message-box02 .features .tit{ font-size: 2.4rem; font-weight: var(--global--fw--bold); color: var(--global--color--navy); margin-bottom: 3rem; position: relative; }



/*

	Servive

*/
main.service .page-title::after{ content: "SERVICE"; }


main.service .service-inbox .service-inbox-inner{ min-height: 49.2rem; display: flex; align-items: center; }






.service-inbox-texts .point{ font-size: 1.4rem; line-height: 1; background-color: #968057; color: var(--global--color--white); padding: .6rem 1.5rem; border-radius: 5rem; margin-bottom: .5rem; display: inline-block; }
.service-inbox-texts .tit{ font-size: 3.5rem; margin-bottom: 3rem; display: flex; flex-direction: column; line-height: 1.4; }

.service-inbox-texts .txt{ font-size: 1.5rem; }


.service-inbox .service-inbox-texts{ width: 50%; max-width: calc(57.5rem - 6rem); }
.service-inbox .service-inbox-image{ width: 50%; height: 100%; min-height: 49.2rem; }

.service-inbox01 .service-inbox-texts,
.service-inbox03 .service-inbox-texts{ margin-left: 6rem; padding-right: 1.5rem; }

.service-inbox01 .service-inbox-image{ background: url('./assets/images/service/service05.webp') no-repeat 50% 50% / cover; }
.service-inbox03 .service-inbox-image{ background: url('./assets/images/service/service02.webp') no-repeat 50% 50% / cover; }


.service-inbox02 .service-inbox-inner,
.service-inbox04 .service-inbox-inner{ flex-direction: row-reverse; }
.service-inbox02 .service-inbox-texts,
.service-inbox04 .service-inbox-texts{ margin-right: 6rem; padding-left: 1.5rem;; }

.service-inbox02 .service-inbox-image{ background: url('./assets/images/service/service01.webp') no-repeat 50% 50% / cover; }
.service-inbox04 .service-inbox-image{ background: url('./assets/images/service/service04.webp') no-repeat 50% 50% / cover; }


/*

	News

*/
main.news .page-title::after{ content: "NEWS"; }
main.news .news-list a:first-child{ border-top: #a5a5a5 .1rem dotted; }
main.news .news-list a{ border-bottom: #a5a5a5 .1rem dotted; display: block; }
main.news .news-list a *{ font-size: 1.4rem; }
main.news .news-list a dl{ padding: 2.5rem 0;display: flex;  }
main.news .news-list a dl dt{ width: 7.5rem; margin-right: 1rem; }
main.news .news-list a dl dd{ width: calc(100% - 8.5rem); padding-right: 4rem; display: flex;
	background: url('./assets/images/common/arrow02.svg') no-repeat 100% 1rem / 1.9rem auto;
}
main.news .news-list a dl dd span{ 
    display: flex;
    margin-right: 3rem;
    height: 2rem;
    justify-content: center;
    align-items: center; min-width: 8rem; text-align: center; background-color: var(--global--color--beige02); line-height: 1; padding: .3rem 1.2rem; border-radius: 8rem; margin-right: 3rem; }

/*==================================
	ページナビ
==================================*/
.page_navigation .wp-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 75px 0 90px;
}
@media (max-width: 799px) {
  .page_navigation .wp-pagenavi {
    margin: 30px 0 40px;
  }
}
.page_navigation .wp-pagenavi > .page,
.page_navigation .wp-pagenavi .current {
  font-size: 16px;
  font-weight: 500;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0 5px;
}
.page_navigation .wp-pagenavi > .page:not(.current),
.page_navigation .wp-pagenavi .current:not(.current) {
  background-color: #d3d9dd;
  border-radius: 50%;
  color: var(--global--color--gray);
  width: 40px;
  height: 40px;
}
@media (min-width: 800px) {
  .page_navigation .wp-pagenavi > .page:not(.current):hover,
  .page_navigation .wp-pagenavi .current:not(.current):hover {
    color: var(--global--color--white);
    background-color: var(--global--color--navy);
  }
}
.page_navigation .wp-pagenavi > .page.current,
.page_navigation .wp-pagenavi .current.current {
    color: var(--global--color--white);
    background-color: var(--global--color--navy);
}
.page_navigation .wp-pagenavi .nextpostslink,
.page_navigation .wp-pagenavi .previouspostslink {
  position: relative;
  font-weight: 500;
  box-sizing: border-box;
}
.page_navigation .wp-pagenavi .nextpostslink::before,
.page_navigation .wp-pagenavi .previouspostslink::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 9px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.3s ease;
}
.page_navigation .wp-pagenavi .nextpostslink.previouspostslink,
.page_navigation .wp-pagenavi .previouspostslink.previouspostslink {
  padding-left: 1.9rem;
  margin-right: 3rem;
}
.page_navigation .wp-pagenavi .nextpostslink.previouspostslink::before,
.page_navigation .wp-pagenavi .previouspostslink.previouspostslink::before {
  left: 0;
  transform: scale(-1, 1);
}
@media (min-width: 800px) {
  .page_navigation .wp-pagenavi .nextpostslink.previouspostslink:hover::before,
  .page_navigation .wp-pagenavi .previouspostslink.previouspostslink:hover::before {
    left: -5px;
  }
}
.page_navigation .wp-pagenavi .nextpostslink.nextpostslink,
.page_navigation .wp-pagenavi .previouspostslink.nextpostslink {
  padding-right: 1.9rem;
  margin-left: 3rem;
}
.page_navigation .wp-pagenavi .nextpostslink.nextpostslink::before,
.page_navigation .wp-pagenavi .previouspostslink.nextpostslink::before {
  right: 0;
}
@media (min-width: 800px) {
  .page_navigation .wp-pagenavi .nextpostslink.nextpostslink:hover::before,
  .page_navigation .wp-pagenavi .previouspostslink.nextpostslink:hover::before {
    right: -5px;
  }
}

.page_navigation .wp-pagenavi .nextpostslink.previouspostslink, .page_navigation .wp-pagenavi .previouspostslink.previouspostslink,
.page_navigation .wp-pagenavi .nextpostslink.nextpostslink, .page_navigation .wp-pagenavi .previouspostslink.nextpostslink{
text-indent: -999rem;
}

.page_navigation .wp-pagenavi .previouspostslink.previouspostslink{
	background: url('./assets/images/common/arrow03.svg') no-repeat 50% 50% / 1.9rem auto;
}
.page_navigation .wp-pagenavi .nextpostslink.nextpostslink,
.page_navigation .wp-pagenavi .previouspostslink.nextpostslink{
	background: url('./assets/images/common/arrow02.svg') no-repeat 50% 50% / 1.9rem auto;

}


.category-list{
	 padding: 7rem 0 4rem;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
.category-list li a{ padding: 1rem 2rem; }

.category-list li:not(:last-child)::after{ content: "｜"; font-size: 2rem; }


.news-article{ padding: 7.5rem 0 9rem; }
.news-article .dates{ margin-bottom: 1.2rem; font-size: 1.4rem; display: flex; }

.news-article .dates span{
	    display: flex;
    height: 2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--global--color--beige02);
    line-height: 1;
    padding: .3rem 2rem;
    border-radius: 8rem;
	font-size: 1.4rem;
	margin-left: 1.5rem;
}

.news-article .title{ font-weight: var(--global--fw--medium); font-size: 2.5rem; padding-bottom: 1.2rem; border-bottom: #a5a5a5 .1rem solid; margin-bottom: 1.5rem; }
.buttons{
	margin-top: 11rem;
}
.buttons ul{ 
	display: flex;
	justify-content: center;
	align-items: center;
}
.buttons ul .btnList{
	margin: 0 3rem;
}.buttons ul .btnList a{
	display: flex;
	width: 24.5rem;
	height: 4.5rem;
	background-color: var(--global--color--navy);
	border-radius: 5rem;
	justify-content: center;
	align-items: center;
	color: var(--global--color--white);
}

.news-article img{ max-width: 100%; }

.buttons ul .btnPrev,
.buttons ul .btnNext{ width: 23.5rem; }

.buttons ul .btnPrev a,
.buttons ul .btnNext a{ 
	display: flex;
	width: 23.5rem;
	height: 4.5rem;
    align-items: center;
    justify-content: flex-end; }

.buttons ul .btnPrev a span{ padding-left: 3.5rem;
	background: url('./assets/images/common/arrow03.svg') no-repeat 0 50% / 1.9rem auto;
}

.buttons ul .btnNext a span{ padding-right: 3.5rem;
	background: url('./assets/images/common/arrow02.svg') no-repeat 100% 50% / 1.9rem auto;
}
	
.buttons ul .btnNext a{ justify-content: flex-start; }




  .humberger-menu{
	z-index: 10002 !important;
	padding: 0;
	width: var(--header--menu);
	height: var(--header--height);
    top: 0;
    right: 0;
}
.humberger-menu .menu-trigger,
.humberger-menu .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; opacity: 1; }
.humberger-menu .menu-trigger{ position: relative; width: var(--header--menu); height: var(--header--height); }
.humberger-menu .menu-trigger span { position: absolute; left: calc(50% - calc(var(--header--menu--line) / 2)); width: var(--header--menu--line); height: .2rem; background: var(--global--color--black); }
.humberger-menu .menu-trigger span:nth-of-type(1) { top: 40%; }
.humberger-menu .menu-trigger span:nth-of-type(2) { top: 50%; }
.humberger-menu .menu-trigger span:nth-of-type(3) { top: 60%; }
.humberger-menu .menu-trigger.active span{ background-color: var(--global--color--black); opacity: 0; }
/*
.humberger-menu .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	        transform: translateY(8px) rotate(-45deg);
	              top: 39%;
}
.humberger-menu .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.humberger-menu .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(45deg);
	        transform: translateY(-6px) rotate(45deg);
	              top: 54%;
}
*/






/* ----------------------------------------------------------------------------------------------------

	Works

---------------------------------------------------------------------------------------------------- */
main.works .page-title::after{ content: "WORKS"; }






/* ----------------------------------------------------------------------------------------------------

	Company

---------------------------------------------------------------------------------------------------- */
main.company .page-title::after{ content: "COMPANY"; }

main.company .company-box{ padding: 8.5rem 0 0; }



.tab{ display: flex; justify-content: center; }
.tab li:not(:last-child){ margin-right: 3rem; }
.tab a{ display: flex; width: 20.5rem; height: 5rem; background-color: var(--global--color--navy); border-radius: 5rem; color: var(--global--color--white); justify-content: center; align-items: center; position: relative; }
.tab a::after{ content: ""; width: 1.2rem; height: 1.2rem; background: url('./assets/images/company/fukisashi.svg') no-repeat 50% 50% / 1.2rem auto; bottom: -.6rem; left: calc(50% - .6rem); position: absolute; }

main.company .greeting{ padding-top: 12rem; }
main.company .greeting .midashi{ margin-bottom: 3rem; }
main.company .greeting-box{ display: flex; }
main.company .greeting-box .greeting-profile{ width: 26.5rem; margin-right: 4rem; }
main.company .greeting-box .greeting-profile .photo img{ max-width: 100%; }
main.company .greeting-box .greeting-profile .president{ margin-top: .7rem; font-family: var(--global--ff--mincho); font-size: 2.6rem; }
main.company .greeting-box .greeting-profile .president span{ display: block; font-size: 1.6rem; }
main.company .greeting-box .greeting-profile .profile{ margin-top: 1.5rem; }

main.company .greeting-box .greeting-profile .profile span{
    font-size: 1.4rem;
    line-height: 1;
    background-color: #968057;
    color: var(--global--color--white);
    padding: .6rem 1.5rem;
    border-radius: 5rem;
    margin-bottom: .5rem;
    display: inline-block; }

main.company .greeting-box .greeting-message{ width: calc(100% - 30.5rem); }

/* history */
main.company .history{ padding-top: 12rem; }
main.company .history .midashi{ margin-bottom: 3rem; }
main.company .history dl:first-of-type{ border-top: #a5a5a5 .1rem solid; }
main.company .history dl{ display: flex; padding: 2rem 0; border-bottom: #a5a5a5 .1rem solid; }
main.company .history dl dt{ width: 22rem; text-align: right; padding-right: 2rem; position: relative; }
main.company .history dl dt::after{ content: "-"; position: absolute; top: 20%; right: 0; line-height: 1; }
main.company .history dl dd{ width: calc(100% - 25rem); padding-left: 3rem; }
/* overview */
main.company .overview{ padding-top: 12rem; }
main.company .overview .midashi{ margin-bottom: 3rem; }
main.company .overview dl{ display: flex; border-bottom: #a5a5a5 .1rem solid; }
main.company .overview dl dt{ width: 16rem; background-color: #dce0ea; padding: 2rem 0 2rem 5rem; }
main.company .overview dl dd{ width: calc(100% - 24rem); background-color: var(--global--color--white); padding: 2rem 3rem 2rem 4rem; }

/* map */
main.company .map{ padding-top: 12rem; }
main.company .map .midashi{ margin-bottom: 5rem; }
main.company .map iframe{ width: 100%; height: 55rem; display: block; }






/* ----------------------------------------------------------------------------------------------------

	Contact

---------------------------------------------------------------------------------------------------- */
main.contact .page-title::after{ content: "CONTACT"; }


main.contact .midashi{  text-align: left; font-size: 2.5rem;}

main.contact .contact-box{ padding: 7rem 0 9rem 0; }


.contact-box-tel{ display: flex; justify-content: space-between; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: var(--global--color--gray) .1rem solid; }



.contact-box-tel .tel-box{ width: 43rem; margin-top: 1rem; }
.contact-box-tel .tel-box a{ font-size: 2.8rem; }
.contact-box-tel .tel-box a i{ font-size: 2.2rem; margin-right: .5rem; }
.contact-box-tel .tel-box p{ font-size: 1.4rem; margin-left: 3.0rem; }


.contact-box-form{ padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: var(--global--color--gray) .1rem solid; }

.contact-box-form-content{ margin-top: 5rem; }

.contact-box-form-content dl{ display: flex; padding: 2rem 0; border-bottom: #afaaa0 .1rem dotted; }
.contact-box-form-content dl dt{ width: 20rem; padding-top: 1rem; display: flex; justify-content: space-between; }
.contact-box-form-content dl dd{ width: calc(100% - 24.5rem); margin-left: 4.5rem; }
.contact-box-form-content dl dd span{ display: block; font-size: 1.4rem; margin-top: .3rem; }

.contact-box-form-content dl dt span.n{ 
    font-size: 1.2rem;
    line-height: 1;
    background-color: #c66d46;
    padding: .3rem 1rem;
    display: flex;
    height: 1.4rem;
	color: var(--global--color--white);
    align-items: center;
    margin-top: .5rem; }
.contact-box-form-content dl dt span.o{ 
    font-size: 1.2rem;
    line-height: 1;
    background-color: #828282;
    padding: .3rem 1rem;
    display: flex;
    height: 1.4rem;
	color: var(--global--color--white);
    align-items: center;
    margin-top: .5rem; }

.contact-box-form-content dl dd input,
.contact-box-form-content dl dd textarea{ width: 100%; background-color: var(--global--color--beige02); padding: 1rem 2rem; border: #afaaa0 .1rem solid; border-radius: .5rem; }

.contact-box-form .contact-box-form-header{ display: flex; justify-content: space-between; }
.contact-box-form .contact-box-form-header .form-text{ width: 43rem; margin-top: 2.4rem; }
.contact-box-form .contact-box-form-header .form-text span{ color: #cc0000; font-weight: bold; }
.contact-box-line{ display: flex; justify-content: space-between; align-items: center; }
.contact-box-line p{ margin-top: 2.5rem; }
.contact-box-line .qr{ max-width: 9.7rem; }
.contact-box-line .qr img{ max-width: 9.7rem; }

.wpcf7 p {
display: inline;
}



.privacy-box{
    width: 100%;
    background-color: var(--global--color--beige02);
    overflow: auto;
    height: 300px;
    border: #aaaaaa 1px solid;
    margin: 3rem 0 2rem 0;
}

.privacy-inbox{


    width: 100%;
    height: 100%;
    padding: 2%;
}
.privacy-inbox .tit{
	display: block;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 2rem;
}
.contact-box-form-content .privacy-inbox dl{
	display: block;
    border-bottom: none;
	padding: 2rem 0 0;
}
.contact-box-form-content .privacy-inbox dl dt{
    font-weight: bold;
    margin-bottom: 5px;
	width: 100%;

}
.contact-box-form-content .privacy-inbox dl dd{
	margin-left: 0;
	width: 100%;
}
.contact-box-form-content .privacy-inbox dl:last-child{
	padding-bottom: 3rem;
}


.agreement{ text-align: center; border-bottom: #afaaa0 .1rem dotted; padding-bottom: 2rem; }

.wpcf7-list-item{ margin: 0; }


.agreement input{ display: inline-grid; }
.agreement label{
  position: relative;
  padding-left: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #121212;
  line-height: 1;
}
.agreement input::before{
    content: "";
    position: absolute;
    display: block;
    top: calc(50% + .6rem);
    left: 0;
    transform: translate(0, -50%);
    width: 16px;
    height: 16px;
	border-radius: .5rem;
    border: 1px solid #afaaa0;
	background-color: var(--global--color--beige--bg);

}
.agreement input::after{
	content: "";
    position: absolute;
    display: block;
    top: 20px;
    left: 6px;
    width: 4px;
    height: 10px;
    border-bottom: 2px solid var(--global--color--gray);
    border-right: 2px solid var(--global--color--gray);
    transform: rotate(45deg);
    opacity: 0;
}



.agreement input:checked::after {
        opacity: 1;
      }

.contact-box-form-content .button{
	margin-top: 4rem;
}
.contact-box-form-content .button input{
	display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5.5rem;
    background-color: var(--global--color--navy);
    color: var(--global--color--white);
    border-radius: 5rem;
    padding: 0 2rem;
	width: 25rem;
	position: relative;
	border: none;
	background: url('./assets/images/common/arrow01.svg') var(--global--color--navy) no-repeat 90% 50% / 1.9rem auto;
}
.contact-box-form-content .button input::after{
	content: "";
	width: 1.9rem;
	height: .6rem;
	right: 0;
	top: 0;
}





.voice .voice-inbox{
	background-color: var(--global--color--beige02);
	border-radius: .5rem;
	padding: 4rem;
	margin-top: 3rem;
}

.voice-inbox dl{ display: flex; }
.voice-inbox dl dt{ width: 7.2rem; }
.voice .voice-inbox dl dd{ width: calc(100% - 10.2rem); }

.voice .voice-inbox dl.c dt{ margin-right: 3rem; }

.voice .voice-inbox dl.h{ margin-top: 5rem; flex-direction: row-reverse; }

.voice .voice-inbox dl.h dd{ text-align: right; }
.voice .voice-inbox dl.h dt{ margin-left: 3rem; }

.works-article .buttons{ margin-top: 8rem; }

.works-article{ padding-bottom: 10rem; }

.works-article-contents{ padding: 10rem 0 7rem 0; }


section.works-lists .works-list{
	display: flex;
	flex-wrap: wrap;
}
section.works-lists .works-list a{
	width: 25%;
}
section.works-lists .works-list a dl dt{
	width: 100%;
	height: 100%;
	aspect-ratio: 4/3;
}
section.works-lists .works-list a dl dt img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section.works-lists .works-list a dl dd{
	padding: 1.5rem 2rem;
}
section.works-lists .works-list a dl dd span{ font-size: 1.4rem; display: block; }



.thumbnails-wrapper p{ text-align: right; margin-top: 1.5rem; }

.works-article .thumbnails{ position: relative; }
.works-article .thumbnails img{ width: 100%; }
.works-article .thumbnails span{ position: absolute; top: 0; left: 0; width: 100%; opacity: 0; }

.works-article .thumbnails .base{ opacity: 1; }
.works-article .thumbnails.active .base{ opacity: 0; }
.works-article .thumbnails.active span{ opacity: 1; }



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

	header .header-inner .logo a span{ font-size: 1.2rem; }
	header .header-inner .header-menubox .menu a{ font-size: 1.4rem; }
	header .header-inner .header-menubox .contacts li.tel{ margin: 0 1.5rem }
	header .header-inner .header-menubox .contacts li.tel a{ font-size: 1.6rem; }
	header .header-inner .header-menubox .contacts li.tel a i{ font-size: 1.4rem; }
	header .header-inner .header-menubox .contacts li.contact a span{ font-size: 14px; width: auto; padding: 0 1.5rem; }

}

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


	header .header-inner .header-menubox .contacts li.tel{ margin: 0; padding: 0 1rem; }
	header .header-inner .header-menubox .contacts li.tel a{ width: 5rem; border-radius: 10rem;
        padding: 0;
        font-size: 2.2rem; justify-content: center;
	}
	header .header-inner .header-menubox .contacts li.tel a i,
	header .header-inner .header-menubox .contacts li.tel a span{ display: none; }
	header .header-inner .header-menubox .contacts li.tel a i{ text-indent: 0; margin-right: 0; font-size: 2.2rem; }



	header .header-inner .header-menubox .contacts li.contact a{ width: 5rem; }
	header .header-inner .header-menubox .contacts li.contact a span{ width: 5rem; height: 5rem; border-radius: 10rem; text-indent: -9999px;
        padding: 0;
        font-size: 2.2rem; }
	header .header-inner .header-menubox .contacts li.contact a span i{ text-indent: 0; margin-right: 0; }
	header .header-inner .header-menubox .contacts li.contact a img{ display: none; }
}



@media screen and (min-width: 931px){
	.tablet{ display: none !important; }
    .globalMenuSp{ display: none; }
}

@media screen and (max-width: 930px){
	header .header-inner .logo a span{ font-size: 1.0rem; }

	
	.tablets{ display: none !important; }

	header .header-inner .header-menubox .contacts{ margin-right: 0; }



	.globalMenuSp-menu .hamburger{
		position: fixed;
		top: 1rem;
		right: 1rem;
	}

	.globalMenuSp-menu .humberger-menu .menu-trigger span{ background-color: var(--global--color--white); }

	
	.globalMenuSp-menu .humberger-menu .menu-trigger span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	        transform: translateY(8px) rotate(-45deg);
	              top: 35%;
}
	.globalMenuSp-menu .humberger-menu .menu-trigger span:nth-of-type(2) {
	opacity: 0;
}
	.globalMenuSp-menu .humberger-menu .menu-trigger span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(45deg);
	        transform: translateY(-6px) rotate(45deg);
	              top: 58%;
}

	.globalMenuSp-menu .humberger-menu{
		height: var(--header--menu);
	
	}


    .globalMenuSp{
		display: initial;
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: var(--global--color--navy);
		visibility: hidden;
		z-index: 0; opacity: 0;
        transition: .5s all;
        align-items: center; }
    .globalMenuSp.active{ display: initial; display: flex; opacity: 1;
		z-index: 999; }
    
    
    .globalMenuSp .globalMenuSp-menu{
        display: block;transition: .5s all;
		height: 100vh;
    }
    
    .globalMenuSp.active .globalMenuSp-menu{
        justify-content: center;
        align-items: center;
		background-color: var(--global--color--navy);
		visibility:visible;
        width: 100%;
		height: 100%;
        margin: 0 auto;
        padding: 7rem 2rem 3rem 2rem;
		overflow-y: auto;
    }

    .globalMenuSp .globalMenuSp-menu .menus li a{
		display: block; padding: 1.2rem 0; text-align: center;
		text-align: left;
		color: var(--global--color--white);
		border-bottom: var(--global--color--white) .1rem solid;
		background: url('./assets/images/common/arrow_sp.svg') no-repeat 100% 50% / 2rem auto;
		padding-right: 2.5rem;
	}

    .globalMenuSp .sns-title{ text-align: center; color: var(--global--color--white); padding-top: 4rem; }
    .globalMenuSp .sns{ display: flex; justify-content: center; margin-top: 1.3rem; }
	.globalMenuSp .sns i{ color: var(--global--color--white); font-size: 4rem; }
	.globalMenuSp .sns li:not(:last-child){ margin-right: 2rem; }

	
    .globalMenuSp .globalMenuSp-menu li.u:not(:last-child) a{ border-bottom: var(--global--color--white) .1rem dotted !important; }
    .globalMenuSp .globalMenuSp-menu li.u a{ background: url(./assets/images/common/under_sp.svg) no-repeat 2% 44% / 1.0rem auto; padding-left: 2.5rem; padding-right: 0; }


}






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

	header .header-inner .header-menubox .contacts{ margin-right: 0; }

	.midashi{ font-size: 2.2rem; }
	.texts{ line-height: 1.8; font-size: 1.4rem; }

	.page-title{ min-height: 18rem; }
	.page-title .title{ font-size: 2.2rem; }
	.page-title::after{ font-size: 3.0rem; bottom: -.2rem; }


	
	header .header-inner .header-menubox .contacts li.tel{ margin: 0 1.0rem 0 0; padding: 0; }
	header .header-inner .header-menubox .contacts a,
	header .header-inner .header-menubox .contacts li.tel a{ height: var(--global--header--height--sp); background: url('./assets/images/common/icon_tel.svg') no-repeat 50% 50% / 4.8rem auto; }


	header{ width: calc(100% - 1.6rem); top: .8rem; left: .8rem; height: var(--global--header--height--sp); }
	header .header-inner .logo a{ height: var(--global--header--height--sp); }
	header .header-inner .logo a span img{ width: 8.4rem; }
	header .header-inner ul.menu{ display: none; }

	section.main .catch .mini{ font-size: 2rem; }
	section.main .catch .point{ font-size: 2.4rem; }
	section.main .catch .point strong{ font-size: 3.4rem; }


	section.about{ padding: 10rem 0 8rem; }
	section.about::before{ font-size: 4.2rem; }
	section.about .texts{ text-align: left; }
	section.about .button a{ width: calc(100% - 4rem); height: 6rem; }
	section.about .button li:not(:last-child){ margin-bottom: 1rem; }

	.button ul{ display: block; }
	.button ul li:not(:last-child){ margin-right: 0; }

	section.works{ padding-top: 3.5rem; }
	section.works .texts{ margin-bottom: 2rem; }

	section.service{ padding: 7rem 0 4.5rem; }
	section.service .service-box{ display: block; }
	section.service .service-box a{ width: calc(100% - 4rem); display: block; padding: 3rem 2rem; }
	section.service .service-box a:not(:last-child){ margin-bottom: 1rem; }
	section.service .service-box a dl dt{ font-size: 2.2rem; }
	section.service .service-box a dl dd.arrow{ height: 3.5rem; }
	section.service .service-box a dl dd{ font-size: 1.4rem; }


	footer .footer-inner .footer-inner-inbox{ display: block; }
	footer .footer-inner .sns-title{ margin-top: 3rem; padding-top: 2rem; border-top: var(--global--color--white) .1rem solid; text-align: center; }
	footer .footer-inner ul.sns{ justify-content: center; margin-top: 1.5rem; }
	footer .footer-inner{ padding: 3rem 1.5rem; }
	footer .footer-inner .footer-menu{ margin-top: 3rem; padding-top: 3rem; border-top: var(--global--color--white) .1rem solid; display: block; }
	footer .footer-inner .copyright{ text-align: center; }




	.branch{ display: none; }


	main.message .message-box01{ padding: 5rem 0 7rem; }
	main.message .message-box01 .tit{ font-size: 1.8rem; text-align: left; }
	main.message .message-box01 .txt{ text-align: left; font-size: 1.4rem; padding: 1rem 0 2.5rem; }

	main.message .message-box01 .point *{ font-size: 1.6rem; width: calc(100% - 4rem); padding: 2rem; }
	main.message .message-box02 .textbox{ padding: 0; }
	main.message .message-box02 .textbox .tit{ padding: 0 1.5rem; }
	main.message .message-box02 .textbox .txt{ padding: 0 1.5rem; }
	main.message .message-box02 .textbox .photo{ padding: 1.5rem 0; }
	main.message .message-box02 .textbox .photo img{ max-width: 100%; width: 100%; }
	main.message .message-box02 .features .tit{ font-size: 1.8rem; margin-bottom: 1.5rem; }
	main.message .message-box02 .features .txt{ font-size: 1.4rem; }
	main.message .message-box02 .features{ min-height: inherit; }
	main.message .message-box02 .features .inner{ padding: 4rem 0; }

	main.message .message-box02 .features01,
	main.message .message-box02 .features02,
	main.message .message-box02 .features03{ background: none; }
	main.message .message-box02 .tit::before{ font-size: 6.7rem; top: -6.5rem; left: 1rem; }


	main.message .message-box02 .features01{
		margin-top: 4rem;
	}


	main.message .message-box02 .textbox{
		max-width: inherit; width: 100%;
	}



	main.service .service-inbox .service-inbox-inner{
		width: 100%;
		max-width: inherit;
		padding-top: 4rem;
	}

	.category-list{ padding: 3rem 0 2rem; }
	.category-list li a {
		padding: 1rem 2rem;
		font-size: 14px;
		padding: 1rem 1rem;
	}
	main.news .news-list a dl{ display: block; padding: 1rem 0; }
	main.news .news-list a dl dd span{ display: none; }
	main.news .news-list a dl dd{ width: calc(100% - 4.5rem); }
	
	.page_navigation .wp-pagenavi{ padding: 0 0 4rem; margin-bottom: 0; }


	.news-article{ padding-top: 3rem; padding-bottom: 5rem; }
	.news-article .dates span{ font-size: 1.2rem; }
	.news-article .title{ font-size: 2rem; }
	.news-article img{ height: auto; }

	.news-article .buttons{ margin-top: 3rem; }

	.buttons ul .btnPrev, .buttons ul .btnNext{ width: 4.5rem; }

	.buttons ul .btnPrev a span,
	.buttons ul .btnNext a span{ text-indent: -999rem; }

	.buttons ul .btnPrev a, .buttons ul .btnNext a{ width: 4.5rem; }
	.buttons ul .btnList{ margin: 0; }
	.buttons ul .btnList a{ width: 20rem; }

	.inner-works{ padding: 0; }
	section.works-lists .works-list a{ width: 50%; }
	section.works-lists .works-list a dl dd{ padding: 1rem; font-size: 1.4rem; }
	section.works-lists .works-list a dl dd span{ font-size: 1.1rem; }

	.thumbnails-wrapper p{ font-size: 1rem; margin-right: 1.5rem; }
	.works-article-contents{ padding: 5rem 0 5rem; }
	.voice .voice-inbox{ padding: 2rem 1.5rem; }
	.voice-inbox dl dt{ width: 5rem; margin-right: 2rem; }
	.voice .voice-inbox dl dd{ width: calc(100% - 7rem); font-size: 1.4rem; }
	.voice .voice-inbox dl.h{ margin-top: 3rem; }
	.works-article .buttons{ margin-top: 3rem; }
	.works-article{ padding-bottom: 3rem; }



	main.company .company-box{ padding-top: 0; }
	.tab{ display: none; }

	main.company .greeting{ padding-top: 4rem; }

	main.company .greeting-box{ flex-direction: column-reverse; }
	main.company .greeting-box .greeting-message{ width: 100%; }
	main.company .greeting-box .greeting-profile{ width: 100%; }
	main.company .greeting-box .greeting-profile .president{ text-align: center; font-size: 2rem; }
	main.company .greeting-box .greeting-profile .president span{ font-size: 1.2rem; }

	main.company .history dl{ display: block; }
	main.company .history dl dt{ width: 100%; text-align: left; }
	main.company .history dl dt::after{ display: none; }
	main.company .history dl dd{ width: 100%; padding-left: 0; }

	main.company .overview dl{ display: block; }
	main.company .overview dl dt{ width: calc(100% - 3rem); padding: 1rem 1.5rem; }
	main.company .overview dl dd{ width: calc(100% - 3rem); padding: 1rem 1.5rem; }

	main.company .overview,
	main.company .map{ padding-top: 4rem; }


	.service-inbox02 .service-inbox-image,
	.service-inbox04 .service-inbox-image,
	.service-inbox03 .service-inbox-image,
	.service-inbox01 .service-inbox-image{ display: none; }


	.service-inbox .service-inbox-texts{ width: calc(100%); margin: 0; padding: 0 1.5rem; max-width: inherit; }
	.service-inbox-texts .tit{ font-size: 2.2rem; }

	.service-inbox-images{ margin-bottom: 3rem; }
	.service-inbox-images img{ max-width: 100%; }

	.service-box{ padding-bottom: 5rem; }


	main.contact .contact-box{ padding: 4rem 1.5rem 4rem; }

	.contact-box-form .contact-box-form-header,
	.contact-box-tel{ display: block; }

	main.contact .midashi{ font-size: 2rem; }
	.contact-box-form .contact-box-form-header .form-text{ width: 100%; margin-top: 0; }

	.contact-box-tel .tel-box{ width: 100%; }
	.contact-box-tel .tel-box a{ display: block; text-align: center; }
	.contact-box-tel .tel-box p{ margin-left: 0; }

	.contact-box-form-content{ margin-top: 2rem; }
	.contact-box-form-content dl{ display: block; }
	.contact-box-form-content dl dt{ width: 100%; }

	.contact-box-form-content dl dd{ width: 100%; margin: 1.5rem 0 0; }

	.contact-box-form-content dl dd span{ font-size: 1.2rem; }

	.contact-box-form-content .button input{ width: 100%; }

	.contact-box-line{ display: block; }
	.contact-box-line .qr{ margin: 2.5rem auto 0; }

	.slick-next:before {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		background: url(./assets/images/front/arrow_r.svg) no-repeat 0 0 / 3rem;
		width: 3rem;
		height: 5.5rem;
	}
	.slick-prev:before {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		background: url(./assets/images/front/arrow_l.svg) no-repeat 0 0 / 3rem;
		width: 3rem;
		height: 5.5rem;
	}

	.slick-next,.slick-prev{ height: 5.5rem; }


	section.service .button ul li a{ height: 7rem; }
	section.service .service-box{ margin-bottom: 0; }
	
	section.service .button ul li a{ padding-left: 4rem; font-size: 1.4rem; }


	header .header-inner .logo a strong{ width: 5.5rem; }


	.humberger-menu .menu-trigger{ height: var(); }


	.humberger-menu .menu-trigger{ height: var(--global--header--height--sp); }
	.globalMenuSp .contact a,
	footer .contact a{ height: 6rem; }
	
}



.scroll-wrapper{
	position: absolute;
	bottom: 0;
	width: 100%;
}

.scroll {
  position: relative;
}
.scroll-text {
  color: var(--global--color--white);
  font-size: 14px;
  text-align: center;
  font-family: var(--global--ff--mincho);
  transform: rotate(90deg);
}
.scroll-border {
  position: relative;
  top: 20px;
  width: 1px;
  height: 100px;
  background-color: #d5d5d5;
  overflow: hidden;
  margin: auto;
}
.scroll-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 30px;
  top: 0;
  left: 0;
  right: 0;
  background: #333;
  animation: scrollbar 2.0s ease-in-out infinite;
  margin: auto;
}
@keyframes scrollbar {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(350%);
    transform: translateY(350%);
  }
}