@charset "utf-8";

body{ margin: 0px; color: #333; font-family: source-han-sans-japanese, sans-serif; font-style: normal; font-weight: 300; }

/*-- ブロック1 --*/
.block0{ padding: 0 0 0 0;}
/*.block1{ background: #f3f1ed url(../img/top.png) no-repeat left top; padding: 0; background-size: cover; margin: auto;}*/
.block1{ background: #f3f1ed url(../img/top.png) no-repeat center top; padding: 0; background-size: 100% auto; margin: auto;}
/*-- /ブロック1 --*/


/*-- ヘッダー --*/
.header{padding: 40px 0 0 0;}
.site-header { display: flex;  height: 113px; background-color: #ffab09; float: right; align-items: center; top: 0px; right: 0px; position: -webkit-sticky; position: sticky; z-index: 5; margin: 35px 0 0 0;}
.site-header.fixed{ position: fixed; top: 0;}
a {	 text-decoration: none; color: #fff; font-weight: 700;}
nav { margin: 0 0 0 auto;}
ul.menu-group { list-style: none; margin: 0 30px 0; display: flex;  padding-inline-start: 0;}
li.menu-item { margin: 0 15px; font-size: 14.9px; font-weight: bold; letter-spacing: 1px;}
.sp-nav { display: none;}
.sp-nav-overlay { display: none;}

/*-- /ヘッダー --*/


/*-- メインビジュアル --*/
.main-box{ max-width: 1200px; margin: 0 auto; padding: 224px 0 620px 60px; box-sizing: border-box;}
.main-ttl{ margin: 0}
.main1-p{ font-size: 36px; font-weight: 700; margin: 20px 0 0 0; letter-spacing: 1px; line-height: 1.3;}
.main2-p{ font-size: 18px; font-weight: 500; line-height: 1.55; letter-spacing: 1px;}
.main3-p{ font-size: 12px; color: #666; margin: 25px 0 0 0;}
.main2-p::after{ content: ""; display: block; width: 32px; height: 4px; background-color: #666; margin-top: 22px;}
/*-- /メインビジュアル --*/


.title-circle{background: url(../img/roop.png) no-repeat left 2px; padding: 0 0 0 22px; }

/*-- 3ボックス --*/
.about-imgbox{ max-width: 1200px; margin: 0 auto; padding-top: 80px; position: relative;}
.about-imgbox::after { content: ""; display: inline-block; position: absolute; right: -36px; top:0; z-index: 0; background: url(../img/about.png) no-repeat 0 0; background-size: 340px 238px; width: 340px; height: 238px;}
.about-img{  margin: 350px 50px 0 0;}
.about{ color: #1a7af7; font-weight: bold; font-size: 16px; line-height: 1.3; position: absolute; right: 0; z-index: 1; top: 1.5em; margin: 0;}
.box{ display: flex; align-items: flex-start; margin: 0;}
.box-text{ font-size: 18px; line-height: 2.2;}
.three-boxs{margin: 0 auto; padding: 0 0 0; position: relative; z-index: 1;}
.three-box1{ width: calc(100% / 3); margin-top: 0;}
.three-box2{ width: calc(100% / 3); margin-top: 85px; padding-left: 60px;}
.three-box3{ width: calc(100% / 3); margin-top: 175px; padding-left: 60px;}
.three-box-img { margin-top: 44px;}
.three-box-img img { width: 100%;}
.three-box-ttl{ font-size: 30px; font-weight: 700; display: flex; align-items: center; margin: 0; padding: 0 0 10px 0; letter-spacing: 1px;}
.three-box-ttl::after{ content: ""; height: 1px; flex-grow: 1; background-color: #999; margin: auto 0 auto 0.5em;}
.three-box-ttl-sub{ font-size: 19px; margin-left: 8px; padding-top: 0.5em; line-height: 1;}

.button { position: relative; z-index: 1; overflow: hidden; width: 200px; padding: 1em; margin: 15px 0; cursor: pointer; line-height: 1.4; transition: color 0.3s cubic-bezier(0.02,0.01,0.47,1),transform 0.3s cubic-bezier(0.02,0.01,0.47,1); color: #ffffff; border: none; border-width: 0; border-color: transparent; border-radius: 100px; background: #ffab09; font-size: 16px;}
.button:after, .button:before { position: absolute; z-index: -1; right: 0; bottom: 0; width: 100px; height: 100px; content: ''; transition: transform 0.15s cubic-bezier(0.02,0.01,0.47,1),opacity 0.15s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: translate(100%,-25%) translateZ(0); transform: translate(100%,-25%) translateZ(0); opacity: 0; border-radius: 50%; background: #009688;}
.button:after, .button:before { background: #ffffff;}
.button:hover { transition: all 0.5s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0); color: #ffffff; box-shadow: 0 1px 8px rgba(0,0,0,0.3);}
.button:hover:before { transition: transform 0.2s cubic-bezier(0.02,0.01,0.47,1),opacity 0.2s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: translate3d(50%,0,0) scale(0.9); transform: translate3d(50%,0,0) scale(0.9); opacity: 0.15;}
.button:hover:after { transition: transform 0.2s cubic-bezier(0.02,0.01,0.47,1) 0.05s,opacity 0.2s cubic-bezier(0.02,0.01,0.47,1) 0.05s; -webkit-transform: translate(50%) scale(1.1); transform: translate(50%) scale(1.1); opacity: 0.25;}
.button:active { opacity: 0.5;}
.button:focus { color: #ffffff;}

.button3 { position: relative; z-index: 1; overflow: hidden; display: block; width: 250px; padding: 1em; margin: 0 auto; cursor: pointer; line-height: 1.4; transition: color 0.3s cubic-bezier(0.02,0.01,0.47,1),transform 0.3s cubic-bezier(0.02,0.01,0.47,1); color: #ffffff; border: none; border-width: 0; border-color: transparent; border-radius: 100px; background: #ffab09; font-size: 16px; font-weight: normal;}
.button3:after, .button3:before { position: absolute; z-index: -1; right: 0; bottom: 0; width: 100px; height: 100px; content: ''; transition: transform 0.15s cubic-bezier(0.02,0.01,0.47,1),opacity 0.15s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: translate(100%,-25%) translateZ(0); transform: translate(100%,-25%) translateZ(0); opacity: 0; border-radius: 50%; background: #009688;}
.button3:after, .button3:before { background: #ffffff;}
.button3:hover { transition: all 0.5s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0); color: #ffffff; box-shadow: 0 1px 8px rgba(0,0,0,0.3);}
.button3:hover:before { transition: transform 0.2s cubic-bezier(0.02,0.01,0.47,1),opacity 0.2s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: translate3d(50%,0,0) scale(0.9); transform: translate3d(50%,0,0) scale(0.9); opacity: 0.15;}
.button3:hover:after { transition: transform 0.2s cubic-bezier(0.02,0.01,0.47,1) 0.05s,opacity 0.2s cubic-bezier(0.02,0.01,0.47,1) 0.05s; -webkit-transform: translate(50%) scale(1.1); transform: translate(50%) scale(1.1); opacity: 0.25;}
.button3:active { opacity: 0.5;}
.button3:focus { color: #ffffff;}
.three-boxs-btn {padding: 20px 0 15px;}
/*-- /3ボックス --*/


/*-- お知らせ --*/
.news-box{ max-width: 1200px; margin: -18px auto 0; padding: 0 0 130px; position: relative;}
.news-box::after{ content: ""; display: inline-block; position: absolute; left: -76px; top:-130px; z-index: 0; background: url(../img/news.png) no-repeat 0 0; background-size: 387px 201px; width: 387px; height: 201px;}
.news-title{ position: relative; z-index: 1; line-height: 1.3;}
.news{ color: #1a7af7; font-weight: bold; font-size: 16px; position: absolute; margin-top: -30px;}
.news-boxs{ padding: 100px 10% 10px; position: relative; z-index: 1;}
.news-list{ list-style: none outside; margin: 0; padding: 0;}
.news-list .item a{ display: flex; flex-wrap: wrap; flex-wrap: nowrap; text-decoration: none; color: #333; border-bottom: 1px solid #ccc; padding: 38px 0;}
.news-list .item:first-child a{ border-top: 1px solid #ccc;}
.news-list .item .date{ margin: 0; min-width: 120px; font-size: 18px; color: #333; padding: 0 80px 0 0; font-weight: 300;}
.news-list .item .title{ margin: 0; width: 100%; font-size: 18px; font-weight: normal;}
.news-list .item a:hover .title{ color: #00BCD4;}

.button-news { position: relative; z-index: 1; overflow: hidden; display: block; width: 250px; padding: 1em; box-sizing: border-box; cursor: pointer; line-height: 1.4; transition: color 0.3s cubic-bezier(0.02,0.01,0.47,1),transform 0.3s cubic-bezier(0.02,0.01,0.47,1); color: #ffffff; border: none; border-width: 0; border-color: transparent; border-radius: 100px; background: #ffab09; margin: 50px auto 0; font-size: 16px; font-weight: normal;}
.button-news:after, .button-news:before { position: absolute; z-index: -1; right: 0; bottom: 0; width: 100px; height: 100px; content: ''; transition: transform 0.15s cubic-bezier(0.02,0.01,0.47,1),opacity 0.15s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: translate(100%,-25%) translateZ(0); transform: translate(100%,-25%) translateZ(0); opacity: 0; border-radius: 50%; background: #009688;}
.button-news:after, .button-news:before { background: #ffffff;}
.button-news:hover { transition: all 0.5s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0); color: #ffffff; box-shadow: 0 1px 8px rgba(0,0,0,0.3);}
.button-news:hover:before { transition: transform 0.2s cubic-bezier(0.02,0.01,0.47,1),opacity 0.2s cubic-bezier(0.02,0.01,0.47,1); -webkit-transform: translate3d(50%,0,0) scale(0.9); transform: translate3d(50%,0,0) scale(0.9); opacity: 0.15;}
.button-news:hover:after { transition: transform 0.2s cubic-bezier(0.02,0.01,0.47,1) 0.05s,opacity 0.2s cubic-bezier(0.02,0.01,0.47,1) 0.05s; -webkit-transform: translate(50%) scale(1.1); transform: translate(50%) scale(1.1);  opacity: 0.25;}
.button-news:active { opacity: 0.5;}
.button-news:focus { color: #ffffff;}

.btn-box{ text-align: center;}

/*-- /お知らせ --*/


/*-- バナー --*/
.banner { max-width: 960px; display: flex; flex-wrap:wrap; list-style: none; justify-content: flex-start; padding-inline-start: 0; margin: 75px auto; padding: 0 55px; box-sizing: border-box; font-family: source-han-sans-japanese, sans-serif; font-style: normal; font-weight: 300; background-color: #fff;}
.banner li:not(:first-child) { margin-left: 29px;}
.banner-span { font-size: 16px; font-weight: 500; margin: 10px 0;}
.banner-span2 { font-size: 14px; margin: 0px;}
.banner-box { border:solid 1px #e2e2e2;  padding: 10px 10px 0; box-sizing: border-box; text-align: center;}
.banner-box img { max-width:100%; height: auto; padding: 15px 40px;}
/*-- /バナー --*/


/*-- footer1 --*/
#footer1 { background-color: #f3f1ed; font-family: source-han-sans-japanese, sans-serif; font-style: normal; margin: auto;}
/* 上 */
.foot-wrap { display: flex; flex-wrap:wrap; align-items: flex-start; max-width: 960px; margin: 0 auto; padding: 60px 55px; box-sizing: border-box; position: relative;}
.foot-wrap::after{ content: ""; display: block; width: 92px; height: 1px; background-color: #ccc; margin: 60px auto 0;}
.foot-menu { display: block; width: calc(100% / 4); text-align: left; padding-right: 10px; box-sizing: border-box;}
.foot-menu:last-child {padding-right: 0;}
.foot-menu-list {list-style: none; text-align: left; margin: 0; padding: 0;}
.foot-menu-list li {margin-bottom: 20px; color: #666;}
.foot-menu-list li:last-child {margin-bottom: 0;}

.foot-wrap a { text-decoration: none; color: #666; font-weight: 300;}
.foot-wrap a:hover { color: #00BCD4;}
/* 下 */
.foot-company{ text-align: center; padding: 0 0 30px 0; color: #666;}
.foot-company p{ line-height:1.25;}  
.span-company{ font-weight: bold;}
.span-tell{ font-weight: bold; font-size: 25px; color: #666;}
.tell-company{ margin-top: 25px;}
/*-- /footer1 --*/


/*-- footer2 --*/
#footer2 { background-color: #ffab09; padding: 18px 1px 18px; max-width: 1980px; margin: auto;}
#footer2 p{ text-align: center; color: #fff; padding: 0 15px;}
/*-- /footer2 --*/




@media screen and (min-width: 1600px) {
    .main-box{ max-width: 1440px; padding: 350px 0 520px 60px;}
    .about-imgbox{ max-width: 1440px; padding-top: 80px;}
    .news-box{  max-width: 1400px; margin: -18px auto 0;}
}



#uni-toolbar #style_selector .style-toggle {
    left: 80px !important;
}