@charset "UTF-8";
body{
height:100%;
}
html, body {
  overflow-x: hidden;
font-size:62.5%;
}
img{
width:100%
}
body,h1,h2,h3,p,div,ul,li{
margin:0;
padding:0;
}
header, section, article, footer, article, aside, time, nav{
display:block;
}
li,ul{
list-style:none;
}
a{
Text-decoration: none
}
.h1_ttl{
font-size:42px;
text-align:center;
color: #2d2d2d;
margin:30px auto;
}
.h2_ttl{
font-size:42px;
text-align:center;
color: #2d2d2d;
margin-bottom:60px;
}
.pc{
display:block;
}
.sp{
display:none;
}
th,td{
border:1px solid #333;
}
.main_top{
padding-top:88px;
border-bottom: 1px solid #5eb9fd;
}
.main{
padding-top:88px;
}
@media screen and (max-width:1200px){
.main_top{
padding-top:60px;
}
.main{
padding-top:60px;
}
}
@media screen and (max-width:767px){
.main_top{
padding-top:5rem;
}
.main{
padding-top:5rem;
}
.sp{
display:block;
}
.pc{
display:none;
}
}
@media screen and (max-width:767px) {
html, body {
  font-size:2.5vw;
}
.h1_ttl{
font-size:4.2rem;
margin:3rem auto 2rem;
}
.h2_ttl{
font-size:4.2rem;
margin-bottom: 2rem;
}
}
header{
width:100%;
position:fixed;
height:88px;
background-color:white;
z-index:10;
}
header .logo{
position:absolute;
top:0;
left:0;
}
header img{
height:88px;
}
header .header_box{
position:fixed;
float:right;
right:0;
padding: 20px;
z-index:100;
}
header .menu_txt{
position:relative;
}
header .menu_txt li{
display: inline-block;
    float: left;
    padding: 0;
    position: relative;
}
header .menu_txt li a{
display: block;
    line-height: 3em;
    font-size: 16px;
color:black;
font-weight:600;
    text-align: center;
    padding: 0 14px;
}
header .menu_txt li a:hover{
opacity:0.5;
}
@media screen and (max-width:1200px) {
header{
height:60px;
}
header img{
height:60px;
}
header .header_box{
padding:10px;
cursor: pointer;
}
header .menu_txt li {
float:none;
display:block;
}
header .menu_txt li a {
    font-size: 2vw;
    text-align: left;
}
header .menu_txt {
    margin-top: 95px;
}
.menu_trigger_outer{
position:relative;
height:40px;
margin-top:10px;
}
.menu_trigger_outer.open{
margin-top:20px;
}
.menu_trigger{
position:relative;
width:3rem;
height:2px;
background-color:black;
margin-right:20px;
transition:0.2s;
}
.menu_trigger:before,.menu_trigger:after{
position:absolute;
content:"";
width:3rem;
height:2px;
background-color:black;
right:0;
}
.menu_trigger:before{
top:10px;
}
.menu_trigger:after{
top:20px;
}
.menu_trigger_outer.open .menu_trigger{
transform:rotate(42deg);
top:0;
right:5px;
width:30px;
}
.menu_trigger_outer.open .menu_trigger:before{
transform:rotate(275deg);
top:0;
width:30px;
}
.menu_trigger_outer.open .menu_trigger:after{
opacity:0;
}
.menu_nav{
position:fixed;
pointer-events:none;
opacity:0;
width:100%;
height:100vh;
z-index:10;
transition:0s;
}
.menu_nav.open{
opacity:1;
pointer-events:auto;
left: 0;
top:60px;
background-color: white;
transition:0.5s;
}
._menu_box{
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
width:80%;
}
}
@media screen and (max-width:767px){
header{
height:5rem;
}
header img{
height:5rem;
width:auto;
}
header .menu_txt li a {
font-size: 2rem;
line-height: 2em;
}
.menu_trigger {
width:2rem;
}
.menu_trigger:before,.menu_trigger:after{
width:2rem;
}
.menu_trigger_outer {
margin-top:0.5rem;
}
.menu_nav.open {
top:5rem;
}
}

#top{
margin-bottom:95px;
}
@media screen and (max-width:767px){
#top{
margin-bottom:5rem;
}
}
#feature{
width:1200px;
margin:0 auto 95px;
}
#feature .feature_display{
width:90%;
margin: auto;
text-align: center;
justify-content: space-between;
display: flex;
}
#feature .feature_txt{
width:88%;
margin:0 auto 30px;
font-size:20px;
}
#feature .feature_area{
    width: 350px;
    display: inline-block;
vertical-align:top;
}

#feature .feature_ttl{
font-size:19px;
}
#feature .feature_area_txt{
font-size:16px;
text-align:left;
}
@media screen and (max-width:1200px){
#feature{
width:100%;
}
#feature .feature_area {
width: 28vw;
}
}
@media screen and (max-width:767px){
#feature{
margin: 0 auto 5rem;
}
#feature .feature_txt {
font-size:2rem;
}
#feature .feature_area img {
height:auto;
}
#feature .feature_display{
display:block;
}
#feature .feature_area {
width:100%;
display:block;
margin-bottom:5rem;
}
#feature .feature_ttl {
font-size:2rem;
}
#feature .feature_area_txt {
font-size:1.5rem;
}
}
#service_plan{
width:1200px;
margin:0 auto 95px;
}
#service_plan .service_plan_txt {
width: 88%;
margin: 0 auto 30px;
font-size: 20px;
}
#service_plan .service_img{
text-align:center;
}
#service_plan img{
width:24%;
}
#service_plan .service_img a:hover{
opacity:0.5;
}
#service_plan .button_position{
margin:auto;
width: 300px;
text-align: center;
}
#service_plan .button_view_all{
position:relative;
display:inline-block;
color:white;
background-color:#2d2d2d;
margin-top:15px;
padding: 20px 55px;
font-size: 18px;
font-weight: bold;
border:#2d2d2d 2px solid;
border-radius: 4rem;
transition: 0.4s;
}
#service_plan .button_view_all:hover{
color:#2d2d2d;
background-color:white;
transition: 0.4s;
}
@media screen and (max-width:1200px){
#service_plan{
width:100%;
}
}
@media screen and (max-width:767px){
#service_plan{
margin: 0 auto 5rem;
}
#service_plan .service_plan {
font-size:2rem;
}
#service_plan .service_plan_txt {
    margin: 0 auto 3rem;
    font-size: 2rem;
}
#service_plan img {
    width: 49%;
}
#service_plan .button_position {
    width: 30rem;
}
#service_plan .button_view_all {
    margin-top: 1.5rem;
    padding: 2rem 5.5rem;
    font-size: 1.8rem;
}
}
#access{
width:1200px;
margin:0 auto 95px;
}
#access .access_area{
display:flex;
justify-content:space-between;
width:80%;
margin:auto;
}
#access .txt_area{
width:41%;
}
#access .access_ttl{
font-size:20px;
}
#access .access_txt{
font-size:16px;
margin-top:50px;
}
@media screen and (max-width: 1200px) {
    #access {
        width: 100%;
    }
#access .office_map{
width:56%;
}
#access iframe{
width: 100%;
}
}
@media screen and (max-width:767px){
#access{
margin: 0 auto 5rem;
}
#access .access_area {
width:90%;
display:block;
}
#access .txt_area {
width:100%;
}
#access .access_ttl {
    font-size: 2rem;
}
#access .access_txt {
    font-size: 1.6rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
}
#access .office_map{
width:100%;
}
#access iframe {
    width: 100%;
}
}
#news{
width:1200px;
margin:0 auto 95px;
}
#news .news_wrap{
width:70%;
font-size:16px;
margin:auto;
border-radius:10px;
box-shadow:0 0 1.5px #2d2d2d;
padding: 10px 20px;
background-color:#FFFCF3;
}
#news a{
color:#8400c5;
}
#news a:hover{
opacity:0.5;
}
#news dl{
display:flex;
color:#333;
text-align:center;
}
@media screen and (max-width: 1200px) {
    #news {
        width: 100%;
    }
}
@media screen and (max-width:767px){
#news dl{
text-align:left;
}
}
#topic{
padding-top:30px;
padding-bottom:95px;
}
#topic .carousel{
width:100%;
height: calc(25vw * 0.5625);
margin: 0 auto;
position: relative;
}
#topic .topic_display{
width:90%;
height: calc(25vw * 0.5625);
margin: 0 auto;
position: relative;
}
#topic .topic_area{
height:100%;
display:flex;
position:absolute;
}
#topic .carousel_list{
width:25vw;
height: calc(25vw * 0.5625);
margin-right: 30px;
background-size:cover;
background-position: center;
background-repeat:no-repeat;
}
/*▼触っていい場所▼*/
#topic .carousel_list:nth-child(1){
background-image:url(../../topic/2025/0628/img/0628.jpg);
}
#topic .carousel_list:nth-child(2){
background-image:url(../../topic/2025/0622/img/0622.jpg);
}
#topic .carousel_list:nth-child(3){
background-image:url(../../topic/2025/0615/img/0615.jpg);
}
/*▲触っていい場所▲*/
#topic .carousel_img{
width:1px;
height:1px;
clip: rect(1px,1px,1px,1px);
-webkit-clip-path:inset(50%);
clip-path:inset(50%);
margin:-1px;
padding 0;
overflow:hidden;
position:absolute;
}
#topic button{
cursor:pointer;
-webkit-appearance:none;
-moz-appearance:none;
vertical-align:middle;
color:inherit;
font:inherit;
border:0;
background:transparent;
padding:0;
margin:0;
outline: none;
border-radius:0;
}

#topic .arrow_wrap{
position:absolute;
top:50%;
height:0;
width:100%;
margin: 0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
#topic .arrow-btn{
width:48px;
height:48px;
background-color:rgba(113,135,245,0.8);
border-radius:50%;
transition:.2s;
}
#topic .arrow-btn:focus{
box-shadow:0px 1px 10px -2px rgba(0,0,0,0.8);
}
#topic .arrow-btn:hover{
background-color:rgb(51,79,216);
box-shadow:0px 1px 10px -2px rgba(0,0,0,0.8);
}

#topic .arrow_left{
position:relative;
}
#topic .arrow_left:before{
content:"";
width:10px;
height:10px;
border-top:2px solid #fefefe;
border-left:2px solid #fefefe;
position:absolute;
pointer-events:none;
top:50%;
left:50%;
transform:translate(-30%,-50%)rotate(-45deg);
}
#topic .arrow_right{
position:relative;
}
#topic .arrow_right:before{
content:"";
width:10px;
height:10px;
border-top:2px solid #fefefe;
border-left:2px solid #fefefe;
position:absolute;
pointer-events:none;
top:50%;
left:50%;
transform:translate(-70%,-50%)rotate(135deg);
}
#topic .topic_ttl{
font-size:1.9rem;
color:#000;
position:absolute;
top:98%;
font-weight:bold;
}
#topic .topic_txt{
font-size:1vw;
position:absolute;
top:110%;
}

#topic .button_position{
margin:95px auto 0;
width: 300px;
text-align: center;
}
#topic .button_view_all{
position:relative;
display:inline-block;
color:white;
background-color:#2d2d2d;
margin-top:15px;
padding: 20px 55px;
font-size: 18px;
font-weight: bold;
border:#2d2d2d 2px solid;
border-radius: 4rem;
transition: 0.4s;
}
#topic .button_view_all:hover{
color:#2d2d2d;
background-color:white;
transition: 0.4s;
}
@media screen and (max-width:767px){
#topic .carousel_list {
    width: 35vw;
height: calc(35vw * 0.5625);
margin-right: 3rem;
}
#topic .topic_ttl {
font-size:3.5vw;
width:35vw;
top:135%;
}
#topic .topic_txt {
font-size:3vw;
width:35vw;
line-height:1.3em;
top:170%;
}
}
#pan{
background-color:#eaf6ff;
}
#pan .pan_txt{
width:1100px;
margin:auto;
padding:20px 0;
font-size:16px;
display:flex;
}
#pan .pan_txt li:after{
padding: 0 0.2em;
content: '>';
}
#pan .pan_txt li:last-child:after{
content: '';
}
#pan a{
color:#000;
}
#pan a:hover{
opacity:0.5;
}
footer{
width:1100px;
margin:auto;
padding:90px 0 90px 0;
}
footer .footer_content{
display:flex;
}
footer .left_content{
width:60%;
}
footer .footer_title{
font-size:19px;
}
footer .footer_txt{
font-size:18px;
}
footer .office_name{
font-size:30px;
font-weight:bold;
}
footer .kana{
font-size:14px;
}
footer .tel{
font-size:30px;
}
footer .tel a{
color:black;
}
footer .right_content{
width:40%;
}
footer .button_position{
width: 500px;
}
footer .contact_button{
position:relative;
display:inline-block;
color:white;
background-color:#2d2d2d;
margin-top:15px;
padding: 15px 150px;
font-size: 18px;
font-weight: bold;
border:#2d2d2d 2px solid;
border-radius: 4rem;
transition: 0.4s;
}
footer .contact_button:hover{
color:#2d2d2d;
background-color:white;
transition: 0.4s;
}
footer .icon_position{
text-align:right;
}
footer .icon{
width:50px;
height:50px;
margin-left:25px;
}
@media screen and (max-width:1200px){
#pan .pan_txt{
width:95%;
}
footer{
width:95%;
}
footer .button_position {
width:100%;
}
footer .contact_button{
padding:15px 30%;
}
}
@media screen and (max-width:767px){
#pan .pan_txt{
font-size:1.5rem;
width: 85%;
}
footer {
padding:3rem 0 3rem 0;
width: 85%;
}
footer .footer_content{
display:block;
}
footer .left_content{
width:100%;
}
footer .footer_title{
font-size:2rem;
}
footer .footer_txt{
font-size:2rem;
}
footer .office_name{
font-size:3rem;
}
footer .kana{
font-size:1.5rem;
}
footer .tel{
font-size:3rem;
}
footer .right_content{
width:100%;
margin-top: 3rem;
text-align:center;
}
footer .contact_button {
padding: 1.5rem 30%;
margin-top:0.5rem;
font-size:1.8rem;
}
footer .icon_position{
margin-top:2rem;
text-align:center;
}
footer .icon{
width:3rem;
height:3rem;
}
}
#pagescroller{
cursor:pointer;
font-size:15px;
position:fixed;
right:20px;
bottom:20px;
padding: 15px 13px 10px;
background-color:#e5f2ff;
border:2px solid #2F49CB;
border-radius: 50%;
z-index:10;
transition: all .3s;
}
#pagescroller a{
display:block;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
width:10px;
height:10px;
border-top:2px solid blue;
border-right:2px solid blue;
transition:.3s;
}
