@charset "UTF-8";
/* CSS Document */
/*--------------------
01.共通
02.ヘッダー
03.フッター
04.下層共通
--------------------*/

/*----------
01.共通
----------*/

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 100;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Thin'),
    local('NotoSansJP-Thin'),
    url('../font/NotoSansCJKjp-Thin.woff2') format('woff2'),
    url('../font/NotoSansCJKjp-Thin.woff') format('woff'),
    url('../font/NotoSansCJKjp-Thin.otf') format('opentype');
}


@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Light'),
    local('NotoSansJP-Light'),
    url('../font/NotoSansCJKjp-Light.woff2') format('woff2'),
    url('../font/NotoSansCJKjp-Light.woff') format('woff'),
    url('../font/NotoSansCJKjp-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 350;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-DemiLight'),
    local('NotoSansJP-DemiLight'),
    url('../font/NotoSansCJKjp-DemiLight.woff2') format('woff2'),
    url('../font/NotoSansCJKjp-DemiLight.woff') format('woff'),
    url('../font/NotoSansCJKjp-DemiLight.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Regular'),
    local('NotoSansJP-Regular'),
    url('../font/NotoSansCJKjp-Regular.woff2') format('woff2'),
    url('../font/NotoSansCJKjp-Regular.woff') format('woff'),
    url('../font/NotoSansCJKjp-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Medium'),
    local('NotoSansJP-Medium'),
    url('../font/NotoSansCJKjp-Medium.woff2') format('woff2'),
    url('../font/NotoSansCJKjp-Medium.woff') format('woff'),
    url('../font/NotoSansCJKjp-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Bold'),
    local('NotoSansJP-Bold'),
    url('../font/NotoSansCJKjp-Bold.woff2') format('woff2'),
    url('../font/NotoSansCJKjp-Bold.woff') format('woff'),
    url('../font/NotoSansCJKjp-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Gotham';
  font-style: normal;
  font-weight: 100;
  src: local('Gotham-Thin'),
    url('../font/Gotham-Thin.woff2') format('woff2'),
    url('../font/Gotham-Thin.woff') format('woff'),
    url('../font/Gotham-Thin.otf') format('opentype');
}


body{
-webkit-font-smoothing: antialiased;
}

*{
box-sizing: border-box;
}

*:focus {
outline: none;
}

#wrapper{
width: 100%;
overflow: hidden;
font-family: 'Noto Sans CJK JP', sans-serif;
font-size: 16px;
color: #585757;
font-weight: 300;
letter-spacing: 0.1em;
position: relative;
-webkit-text-size-adjust: 100%;
}

.pc{
display: block;
}

.sp{
display: none;
}

.contents_in{
max-width: 960px;
width: 96%;
margin: 0 auto;
}

a{
color: #585757;
}

a:hover{
color: #585757;
}

a:link{
color: #585757;
}

img{
width: 100%;
height: auto;
display: block;
}


.product_fixed_btn{
max-width: 64px;
width: 100%;
position: fixed;
top: 100px;
left: 0;
z-index: 5;
}

.product_fixed_btn li{
background: #fff;
border-top: 8px solid #666;
font-weight: 100;
font-size: 16px;
letter-spacing: 0.15em;
margin: 0 0 15px;
}

.product_fixed_btn li a{
display: block;
width: 100%;
padding: 17px 0 30px;
position: relative;
}

.product_fixed_btn li a span{
display: block;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin: 0 auto;
}

.product_fixed_btn li a::after{
content: "";
display: block;
width: 11px;
height: 5px;
background: url(../img/arrow_bottom01.png) no-repeat center bottom;
background-size: 100% auto;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
}

.product_fixed_btn li:nth-child(1){
border-top-color: #5ccdcc;
}

.product_fixed_btn li:nth-child(2){
border-top-color: #65b9f4;
}



/*----------
02.ヘッダー
----------*/

header{
width: 100%;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}

header .contents_in{
display: flex;
align-items: start;
justify-content: space-between;
}

header .logo{
max-width: 120px;
width: 100%;
margin-top: 24px;
}

header nav{
max-width: 623px;
width: 100%;
margin: 16px 32px 14px 27px;
}


header .pc_nav .nav_in{
width: 100%;
display: flex;
align-items: start;
justify-content: space-between;
}

header .pc_nav .nav_in li span{
display: block;
font-weight: 300;
letter-spacing: 0.05em;
}

header .pc_nav .nav_in .en_nav{
font-size: 14px;
line-height: 20px;
position: relative;
padding: 0 5px 3px;
}

header .pc_nav .nav_in li .en_nav::after{
content: "";
display: block;
width: 0;
background: #5CCD7E;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
transition: all .3s;
}

header .pc_nav .nav_in li.active .en_nav::after,header .pc_nav .nav_in li:hover .en_nav::after{
width: 100%;
}

header .pc_nav .nav_in .jp_nav{
font-size: 12px;
line-height: 18px;
color: #AAAAAA;
}

header .sp_nav{
display: none;
margin: 0;
}

header.active .sp_nav .nav_in{
display:none;
}

header .contact_btn_g{
display: none;
}

header .contact_btn{
max-width: 140px;
width: 100%;
background: #FCB835;
padding: 14px 10px 7px;
}

header .contact_btn .mail_icon{
display: block;
max-width: 20px;
width: 100%;
margin: 0 auto 10px;
}

header .contact_btn .tel_number{
display: block;
border: 1px solid #fff;
border-radius: 12px;
max-width: 120px;
width: 100%;
padding: 2px 0 1px;
text-align: center;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 20px;
color: #fff;
}

header .contact_btn.tel_btn{
display: none;
}


/*----------
03.フッター
----------*/

footer .sitemap_g{
background: #5CCD7E;
width: 100%;
padding: 88px 0 68px;
}
footer .sitemap_g .contents_in{
max-width: 806px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}

footer .sitemap_g .contents_in .right_box{
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 442px;
width: 54.8%;
}

footer .sitemap_g .right_box .nav_box{
padding-right: 8px;
max-width: 192px;
}

footer .sitemap_g .nav_box{
max-width: 340px;
padding-right: 8px;
}

footer .sitemap_g .nav_box ul:first-of-type{
padding-bottom: 32px;
}

footer .sitemap_g .nav_box ul li{
padding-left: 1em;
text-indent: -1em;
}
footer .sitemap_g .nav_box li a{
color: #fff;
font-size: 16px;
line-height: 32px;
font-weight: 700;
letter-spacing: 0.15em;
}
footer .sitemap_g .nav_box li a .jp_nav{
font-weight: 300;
display:inline-block;
text-indent: 0;
padding-left: 4px;
}
footer .sitemap_g .nav_box ul li.big_nav a{
font-weight: 300;
}
footer .sitemap_g .nav_box ul li.big_nav ul{
padding: 0;
}

footer .sitemap_g .nav_box ul li.big_nav ul.small_nav li a{
font-weight: 700;
line-height: 32px;
}
footer .sitemap_g .nav_box ul li.big_nav ul.small_nav li a .jp_nav{
font-weight: 300;
display:inline-block;
}

footer .sitemap_g .nav_box .title{
font-size:16px;
display:inline-block;
padding: 6px 12px 7px;
border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-weight: 400;
letter-spacing: 0.1em;
margin: 0 0 32px;
}
footer .sitemap_g .map_title{
font-size:16px;
padding: 6px 12px 7px;
color: #fff;
font-weight: 400;
letter-spacing: 0.1em;
margin: 0 0 32px;
}


footer .gotop_btn{
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
border: 1px solid #5CCD7E;
position:fixed;
/*bottom: 238px;*/
right: 20px;
bottom: 0;
z-index: 3;
transition: .4s ease;
}
footer .gotop_btn span{
width: 100%;
height: 100%;
padding: 14px 11px;
display: block;
}
footer .gotop_btn span img{
width: 16px;
height: auto;
}
footer .gotop_btn:hover{
transform: scale(1.1);
}

footer .bottom_g{
padding: 23px 0 25px;
}
footer .bottom_g .contents_in{
max-width: 806px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
footer .bottom_g .left_box{
display: flex;
justify-content: flex-start;
align-items: center;
}

footer .bottom_g .logo{
max-width: 136px;
margin-right: 36px;
}
footer .bottom_g .access{
font-size: 12px;
line-height: 24px;
}
footer .bottom_g .copy{
font-size: 14px;
line-height: 24px;
}


/*----------
04.下層共通
----------*/




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

.product_fixed_btn {
max-width: 52px;
}
.product_fixed_btn li {
font-size: 14px;
}
.product_fixed_btn li a{
padding: 14px 0 26px;
}






}



@media only screen and (max-width:1024px){
/*----------
01.共通 1024
----------*/




/*----------
02.ヘッダー 1024
----------*/

header{
height: 50px;
}

header .nav_btn{
display: block;
}

header .pc_nav {
display: none;
}

header .sp_nav {
display: none;
}


header .nav_btn{
width: 40px;
height: 40px;
display: block;
position: absolute;
top: 5px;
right: 0px;
cursor: pointer;
/* overflow: hidden; */
z-index:10;
}

header .nav_btn .nav_line,
header .nav_btn .nav_line span{
width: 100%;
position: absolute;
left: 0;
}

header .nav_btn .nav_line{
height: 2px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition-duration: .3s;
}

header .nav_btn .nav_line span{
display: block;
height: 100%;
top: 0;
overflow: hidden;
background: #cecece;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}

header .nav_btn .nav_line01{
top: 15px;
}

header .nav_btn .nav_line02 {
width: 40px;
bottom: 15px;
left: unset;
right: 0;
margin: -1px 0 0;
}

header.active .nav_btn{
top: 25px;
right: -2px;
}

header.active .nav_btn .nav_line01{
top:0px;
-webkit-transform: translateY(9.5px) rotate(-35deg);
transform: translateY(9.5px) rotate(-35deg);
background: #cecece;
}

header.active .nav_btn .nav_line02{
top:19px;
width: 100%;
-webkit-transform: translateY(-8.5px) rotate(35deg);
transform: translateY(-8.5px) rotate(35deg);
background: #cecece;
}

header .sp_nav .nav_in{
width: 100%;
display: block;
background: #5CCD7E;
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: scroll;
padding-top: 27px;
}

header.active .sp_nav .nav_in{
display: block;
}

header .sp_nav .nav_in .contents_in{
width:100%;
padding-left: 42px;
display: block;
}

header .sp_nav .nav_in .logo{
max-width: 98px;
margin-bottom: 27px;
}

header .sp_nav .nav_in .nav_g{
width: 100%;
border-top: 1px solid #fff;
padding: 10px 0;
display: flex;
}

header .sp_nav .nav_in .nav_g .nav_box{
padding-right: 37px;
}

header .sp_nav .nav_in ul li{
padding: 15px 0;
}
header .sp_nav .nav_in ul li a{
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.15em;
}
header .sp_nav .nav_in ul li a .jp_nav{
font-weight: 300;
display:inline-block;
margin-left: 4px;
}
header .sp_nav .nav_in ul li.big_nav a{
font-weight: 300;
}

header .sp_nav .nav_in ul li.big_nav ul.small_nav{
margin-left: 1em;
}

header .sp_nav .nav_in ul li.big_nav ul.small_nav li a{
font-weight: 700;
line-height: 18px;
}
header .sp_nav .nav_in ul li.big_nav ul.small_nav li a .jp_nav{
font-weight: 300;
display:inline-block;
margin-left: 1em;
}
header .sp_nav .nav_in ul li.big_nav ul.small_nav li:first-child{
padding-top: 30px;
}
header .sp_nav .nav_in ul li.big_nav ul.small_nav li:last-child{
padding-bottom: 0px;
}

header .sp_nav .nav_in .title{
font-size:14px;
display:inline-block;
padding: 5px 8px 6px;
border: 1px solid #fff;
border-radius: 20px;
color: #fff;
font-weight: 400;
letter-spacing: 0.1em;
margin: 10px 0 10px;
}


header .contact_btn.pc{
display: none;
}

header .contact_btn_g {
display: flex;
margin-right: 40px;
}

header .contact_btn{
height: 50px;
width: 60px;
}

header .contact_btn.tel_btn{
display: block;
background: #faa90d;
position: relative;
}

header .contact_btn.tel_btn .num_box{
display: none;
background: #faa90d;
position: absolute;
bottom: -40px;
right: 0;
width: 120px;
height:40px;
padding: 8px 4px;
}

header .contact_btn.tel_btn .num_box .tel_number{
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03;
border-radius: 6px;
}

header .contact_btn .mail_icon{
position: relative;
}
header .contact_btn .mail_icon::after{
content: '';
display: block;
background: url("../img/arrow_bottom02.png") no-repeat center;
background-size: contain;
width: 9px;
height: 5px;
position: absolute;
bottom: -9px;
left: 0;
right: 0;
margin: 0 auto;
}

header .sp_nav .nav_in .btn_g span.mail_icon::after,
header .contact_btn.tel_btn .mail_icon::after{
content: none;
}



/*----------
03.フッター 1024
----------*/

footer .sitemap_g .nav_box li a{
font-size: 14px;
line-height: 32px;
}



/*----------
04.下層共通 1024
----------*/


}




@media only screen and (max-width:960px){
/*----------
02.ヘッダー 960
----------*/



}

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

/*----------
01.共通
----------*/

.pc{
display: none;
}

.sp{
display: block;
}

.contents_in{
width: 90%;
}


.product_fixed_btn{
top: 70px;
max-width: 40px;
}
.product_fixed_btn li{
font-size: 11px;
border-top: 4px solid #666;
}

/*----------
02.ヘッダー 750
----------*/

header .logo {
max-width: 95px;
width: 100%;
margin: 15px 0 0 14px;
}

header .sp_nav .nav_in ul li a{
font-size: 10px;
}
header .sp_nav .nav_in .nav_g .nav_box{
padding-right: 28px;
}
header .sp_nav .nav_in .title{
font-size: 11px;
}
header .sp_nav .nav_in ul li.big_nav ul.small_nav {
margin-left: 0.6em;
}

header .sp_nav .nav_in .btn_g{
width: 100%;
display: flex;
}

header .sp_nav .nav_in .btn_g .contact_btn{
width: 50%;
max-width: none;
height: auto;
padding-bottom: 12px;
}

header .sp_nav .nav_in .btn_g .contact_btn .tel_number{
margin: 0 auto;
font-size: 12px;
border-radius: 5px;
}

header .sp_nav .nav_in .btn_g span.mail_icon{
width: 20px;
height: 20px;
}


/*----------
03.フッター 750
----------*/

footer{
position: relative;
}

footer .sitemap_g{
padding: 80px 0 49px;
}

footer .sitemap_g .map_title{
font-size:11px;
padding: 0 0 8px;
color: #fff;
font-weight: 400;
letter-spacing: 0.1em;
max-width: 580;
width: 77.3%;
min-width: 290px;
margin: 0 auto 17px;
border-bottom: 1px solid #fff;
}
footer .sitemap_g .contents_in{
width: 77.3%;
min-width: 290px;
}
footer .sitemap_g .contents_in .right_box{
display: block;
}
footer .sitemap_g .nav_box ul li{
padding: 10px 0 10px 1em;
}

footer .sitemap_g .nav_box li a{
font-size: 10px;
line-height: 16px;
}
footer .sitemap_g .nav_box ul li.big_nav ul.small_nav li a{
font-size: 10px;
line-height: 16px;
}

footer .sitemap_g .nav_box ul li.big_nav ul.small_nav li:first-child{
padding-top: 20px;
}
footer .sitemap_g .nav_box ul li.big_nav ul.small_nav li:last-child{
padding-bottom: 0px;
}

footer .sitemap_g .nav_box .title{
padding: 5px 8px 5px;
font-size: 11px;
margin: 0 0 17px;
}

footer .sitemap_g .nav_box ul,
footer .sitemap_g .nav_box ul:first-of-type {
padding-bottom: 20px;
}

footer .gotop_btn{
right: 5px;
}


footer .bottom_g{
padding: 40px 0 80px;
}
footer .bottom_g .contents_in{
display: block;
text-align: center;
}
footer .bottom_g .left_box{
display: block;
margin-bottom: 33px;
}
footer .bottom_g .logo{
max-width: 95px;
margin: 0 auto 21px;
}
footer .bottom_g .access{
font-size: 10px;
line-height: 16px;
}
footer .bottom_g .copy{
font-size: 10px;
line-height: 12px;
}


/*----------
04.下層共通 750
----------*/










}



@media only screen and (max-width:360px){
/*----------
02.ヘッダー 360
----------*/
header .sp_nav .nav_in{
padding-top: 16px;
}
header .sp_nav .nav_in .logo{
margin-bottom: 16px;
}
header.active .nav_btn{
top: 16px;
}
header .sp_nav .nav_in .contents_in{
padding-left: 14px;
}
header .sp_nav .nav_in .nav_g .nav_box{
padding-right: 18px;
}




}