@charset "utf-8";
/* ===========================================================
 *
 * tsh.aceweb.jp LP スタイルシート
 * Last UpDate : 2023/12/05
=========================================================== */

/* ----------------------------------------------------------
	style.css
---------------------------------------------------------- */

/* ----------------------------------------------------------
 common
---------------------------------------------------------- */


html {
  font-feature-settings: "palt";
}

body {
color: #333;
background-color: #fff;
font-family: "Helvetica Neue", "Helvetica","source-han-sans-japanese","Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
/*
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .h2Wrap{ line-height: 1.7 !important; }

}
*/




/* ----------------------------------------------------------
 link
---------------------------------------------------------- */
/*a:link		{ color: #fff; text-decoration: none; }
a:visited	{ color: #333; text-decoration: none; }
a:hover		{ color: #425a9f; text-decoration: none; }
a:active	{ color: #425a9f; text-decoration: none; }*/



/* ----------------------------------------------------------
 header
---------------------------------------------------------- */

header{font-family: zen-old-mincho, sans-serif; font-weight: 700; font-style: normal; box-shadow: 0px 8px 16px -6px rgba(0,0,0,0.3); position: fixed; width: 100%; background-color: #fff; height: 100px; z-index: 999; overflow: hidden;}
.header_sec{text-align: center;}
.header_logo{margin: 0 auto; width: 550px; padding: 14px 0; height: 100px;}








/***************************************
サブメニュー
***************************************/
.has-child{position: relative;}


ul.submenu {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50% , 0);
  width: 230px;
  
  margin: 0;
  text-align: center;
  z-index: 99999;
  display: block;
  box-shadow: 0px 8px 10px -6px rgba(0,0,0,0.3);
}


.submenu a{padding: 15px 0; display: block;  background-color: #fff; font-size: 1.5rem; border-bottom: 1px solid #F6E72F;}
.submenu a:hover{background-color: #F6E72F; }
.submenu li{visibility: hidden; height: 0; transition: .5s;  color: transparent;}
.submenu li:last-child a{border: none;}

ul.submenu li:first-child {
  border: 0 none; 
}
.has-child:hover .submenu li{visibility: visible; height: 50px; transition: .5s; color: #333;}

.header_item ul.submenu a::after{display: none;}


/*▲ メニューカスタマイズ (ここまで) ▲ */


/*ACCORDION toggle*/


.accordion_icon{display: flex; gap: 10%; justify-content: center; margin: 60px auto 20px;font-size: 2.5rem;}
nav .accordion_icon a{border-bottom: none;}
nav .accordion_tell a i{color: #4DABE9;  border-radius: 100%; background-color: #fff; border: 2px solid #4DABE9; padding: 12px; }
nav .accordion_contact a i{color: #1D497B;  border-radius: 100%; background-color: #fff; border: 2px solid #1D497B; padding: 12px;}
nav .btn_trial_wrapper a{color: #fff; text-align: center;  border-bottom: solid 5px #AE6333;}
nav .btn_trial_item01 .free_trial{font-size: 2.3rem;}
 
	.accordion_logo{width: 80%; margin: 0 auto 30px; text-align: center;}
.toggle p{
    position: absolute;
    color: #2B4F91;
    left: 50%;
    bottom: 27px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    transform: translate(-50%, 0);}

	.toggle{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: none;
    transition: background-color 0.2s ease;
    cursor: pointer;}
	
	.toggle::before, .toggle::after {
    content: "";
    background-color: #222;
    transition: background-color 0.3s ease;
}
	
	.toggle > span, .toggle:before, .toggle:after{
	display: block;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 1px;}
	.toggle:before{transform: translate(-50%, -5px);}
	.toggle:after{transform: translate(-50%, 5px);}


.toggle {
  position: fixed;

}



.toggle_menu_list {
 	display: none; 
	position: fixed;
	width: 100%;
	height: 100vh;
	margin: 0;
	list-style: none;
	top: 0;
	left: 0;
	padding: 60px 25px;
  	background-color: #fff;
  
    }
.toggle[aria-expanded=true] > span {
  opacity: 0;
}
.toggle[aria-expanded=true]::before, .toggle[aria-expanded=true]::after {

}
.toggle[aria-expanded=true]::before {
  animation: 0.3s ease closeBar1 forwards;
}
.toggle[aria-expanded=true]::after {
  animation: 0.3s ease closeBar2 forwards;
}
.toggle.-close::before {
  animation: 0.3s ease closeBar1Rev forwards;
}
.toggle.-close::after {
  animation: 0.3s ease closeBar2Rev forwards;
}

@keyframes closeBar1 {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
	
@keyframes closeBar2 {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes closeBar1Rev {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes closeBar2Rev {
  0% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(10px);
  }
}
  
.nav {
	position: fixed;
	top: 0;
    right: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	padding: 40px 0;
    border: 1px solid #f5f5f5;
	justify-content: center;
	align-content: center;
	align-items: center;
	overflow: scroll;
	background: rgba(255,255,255,1);
	color: #fff;
	transition: opacity 0.3s ease, visibility 0.3s ease;
    /* スクロールバー非表示 */
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}

 /*Google Chrome、Safariへの対応*/
.nav::-webkit-scrollbar{
  display: none;

}

.nav[aria-hidden=true] {
  	visibility: hidden;
  	opacity: 0;
 	pointer-events: none;
    
}
.nav[aria-hidden=false] {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
    overflow: scroll;
}

.toggle_menu li {
  font-weight: 500;
  
  line-height: 1.5;
}
.toggle_menu li a {
	color: #333;
	transition: .5s;
	border-bottom: 1px solid #c6c6c6;
	display: block;
	padding: 15px;
  font-size: 1.5rem;
  font-weight: 400;
}

.toggle_menu i{margin-right: 10px;}
.toggle_menu li a:hover{ transition: .5s; background-color: #F1F1F1}
.toggle_menu_sub li{line-height: 2rem;}
.toggle_menu_sub li a{font-size: 1.5rem; padding: 8px 20px; border-bottom: none; position: relative;}
.toggle_menu_sub li a:after{content: ""; padding: 1.5px; position: absolute; top: 17px; left: 12px; background-color: #333; border-radius: 100%;}
/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
footer{background-color: #fff; font-family: zen-old-mincho, sans-serif; font-weight: 700; font-style: normal;}
.footer_copyright{text-align: center; font-size: 1.2rem; padding: 30px 0;}





/* ぱんくず */
.breadcrumbs_wrapper{font-size: 1rem;} 
.breadcrumbs{max-width: 1100px; margin: 0 auto;}
.breadcrumbs > ol{display: flex; justify-content: center;} 
.breadcrumbs > ol > li{ display: inline-block; position: relative; color: #999; }
.breadcrumbs > ol > li:before{ content: "/"; display: block; position: absolute; top: 4px; left: 6px;  font-size: 1.1rem; }
.breadcrumbs > ol > li:first-child:before{ content: ""; font-size: 1.7rem;}
.breadcrumbs > ol > li a{ font-size: 1.1rem; margin: 0 0 0 20px; }
.breadcrumbs > ol > li:first-child a{ margin: 0 0 0 0; }
.breadcrumbs > ol > li a:hover{ opacity: 0.6; }
.breadcrumbs ol span a{margin: 0 8px 0 8px;}
.breadcrumbs ol span:first-child a{margin: 0 8px 0 0;}

/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{ position: relative; padding-top: 100px;  font-family: zen-old-mincho, sans-serif; font-weight: 700; font-style: normal;}
.contents{background-color: #fff;}
.notfound_sec{max-width: 1100px; margin: 0 auto; padding: 140px 0; font-size: 2rem; width: 90%;}
.anchor{ padding-top: 50px; margin-top: -50px; display: block; z-index: 0;}
.headline{padding-top: 50px; margin-top: -50px; display: block;}


/* lnavi */


/* トップページ */
.top_img{width: 100%; margin-bottom: 80px;}
.top_img img{width: 100%; height: auto;}
.top_inner{max-width: 1200px; margin: 0 auto;}
.top_inner h2{font-size: 2.5rem; margin-bottom: 15px;}
.top_galley{margin-bottom: 80px;}

.top_inner .top_galley{display: flex; row-gap: 20px!important; column-gap: 20px!important;}
.top_inner .top_galley figure{width: calc((100% - 60px)/4)!important; position: relative; padding-top: calc((((100% - 60px)/4)/3)*2);}
.top_inner .top_galley figure img{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

.top_inner .top_topic .top_galley figure{width: calc((100% - 20px)/2)!important; padding-top: calc((((100% - 20px)/2)/3)*2); }



/* お問合わせ */
.contact_wrapper{background-color: #fff; margin-bottom: 40px; }
.contact_sec{max-width: 1200px; margin: 0 auto; padding: 140px 0; width: 90%; }
.mail_confirm{font-size: 1.2rem;}
.policy_wrapper{}
.policy_sec{ margin: 0 auto; padding: 50px 0 80px;}
.policy_sec h3{}
.policy_txt{margin-bottom: 40px;}
.policy_txt p{ font-weight: 300; line-height: 2.5rem; font-size: 1.4rem;}

/* サンクスページ */
.thanks_sec{max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0 40px;
  line-height: 2.5rem;
  font-size: 1.4rem;
  width: 90%;}





/* フォーム */
.contact_item{display: flex; width: 100%; padding: 20px 20px; border-bottom: 1px solid #ccc; max-width: 1000px; margin: 0 auto; width: 90%;}
.contact_tit{width: 35%;  font-weight: 700; position: relative; margin-left: 60px;}
.contact_tit span{position: absolute;  background-color: #E02E30; color: #fff; margin-right: 15px; border: 1px solid #E02E30; padding: 2px 8px; left: -50px; top: 3px; font-size: 1rem;}
.contact_tit .optional{background-color: #999; border: 1px solid #999;}
.contact_txt,
.contact_adress,
.contact_txtarea{width: 65%;}
.contact_txt input{font-size: 2rem; background: #f7f7f7; height: 40px; padding: 8px; border: 1px solid #ccc; border-radius: 5px;}
.contact_txtarea textarea{font-size: 2rem; padding: 8px; background: #f7f7f7; border: 1px solid #ccc;}
.contact_adress_sub p{padding-bottom: 10px;}
.contact_adress input{background: #f7f7f7; border: 1px solid #ccc; height: 35px; margin-left: 15px; font-size: 2rem; border-radius: 5px;}
.contact_submit{border-bottom: none;}
.contact_submit_btn{text-align: center; margin-top: 30px;}
.contact_submit_btn input{ font-weight: 700; background-color: #e47e19; color: #fff; font-size: 1.8rem; 
    letter-spacing: 1px; padding: 10px 30px; cursor: pointer;   -webkit-appearance: none; border-radius: 5px; border: none; position: relative; z-index: 99;}

input[type="checkbox"]{float: left;}
.contact_check{display: flex;}
.contact_submit .contact_tit{width: 30%;}
.wpcf7-spinner{display: none!important;}







/*
.nf-form-fields-required{display: none;}
.nf-field-label span:before{content: "必須" }
.nf-field-element{text-align: center;}
.nf-field-element #nf-field-4{background-color: #fff; color: #333; font-size: 2rem; font-weight: 500; padding: 10px 20px;}
.nf-after-form-content{text-align: center;}
.nf-response-msg{text-align: center;}
*/






/* ----------------------------------------------------------
 SP CSS
---------------------------------------------------------- */
@media screen and (max-width:680px){
img,video {
  max-width: 100%;
  height: auto;
}

/* フォントサイズ10px=62.5% */
html{ font-size: 60%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem; height: auto !important; padding-top: 0; }

/* 非表示用 */
.noneSP	{ display: none !important; }


/* ----------------------------------------------------------
 header
---------------------------------------------------------- */




/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */

.btm_menu { position: fixed; bottom: -50px; width: 100%; border-top: 1px solid #ccc; z-index: 99; }
.btm_menu li { float: left; width: 50%; }
.btm_menu li:first-child a { border-right: 1px solid #ccc; }
.btm_menu li a { display: block; height: initial; text-align: center; font-size: 1.6rem; padding: 12px; background-color: #ADB94A; color: #fff; transition: .5s;}
.btm_menu li a i{ font-size: 1.8rem; margin-right: 10px; }
.btm_menu li a:hover { background-color: #fff; color: #333; transition: .5s;}
.btm_menu ul:after { content: ''; clear: both; display: block; }







/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */






    
    
/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.sp_br{display: block;}

.h1_wrapper{width: 100%; }

.contents{  margin: 0 auto  }
.wrapper{padding-top: 50px;}


/*トップページ*/
.top_inner{width: 90%; margin: 0 auto;}
.top_inner h2{font-size: 2rem;}
.top_inner .top_galley{gap: 15px!important;}
.top_inner .top_galley figure{width: calc((100% - 15px)/2)!important; padding-top: calc((((100% - 15px)/2)/3)*2);}



/* お問合せ */
.contact_sec{padding: 60px 0;}
.contents .contact_h2{font-size: 3.5rem; letter-spacing: 1px;}
.contact_item{display: block; padding: 20px 10px;}
.contact_tit{margin: 0 0 15px 50px; width: initial;}
.contact_essential .contact_tit{margin-left: 50px; width: initial;}
.policy_sec h3{}


    
/* フォーム */
.wpcf7-form-control-wrap{}
.contact_txt, .contact_adress, .contact_txtarea{width: 100%;}
.contact_txt input{width: 95%; margin: 0 auto;}
.contact_adress input{width: 95%; margin-left: 0;}
input[type="checkbox"]{padding: 8px;}
.form-width{max-width: 100%;}
.contact_sec .wpcf7-spinner{display: block;}
.contact_adress_sub .wpcf7-form-control-wrap{margin-top: 15px;}



    
::placeholder{ color: #999;}
/* 旧Edge対応 */
::-ms-input-placeholder{ color: #999; }
/* IE対応 */
:-ms-input-placeholder{ color: #999; }



/* ヘッダー */
header{box-shadow: 0px 6px 5px -6px rgba(0,0,0,0.3); height: 50px;}
.header_logo{width: 250px; padding: 8px 0; height: 50px;}






}

/* ----------------------------------------------------------
 SP CSS END
---------------------------------------------------------- */

/* ----------------------------------------------------------
 TAB CSS
---------------------------------------------------------- */
@media screen and (min-width:681px) and (max-width:1119px){

img,video {
  max-width: 100%;
  height: auto;
}

/* フォントサイズ10px=62.5% */
html{ font-size: 62.5%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem; padding-top: 0; }

/* 非表示用 */
.noneTAB		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
/* ヘッダー */
header{box-shadow: 0px 6px 5px -6px rgba(0,0,0,0.3); height: 50px;}
.header_logo{width: 250px; padding: 8px 0; height: 50px;}



/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */


	
/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */




/* ぱんくず */


/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{ position: relative; overflow: hidden; padding-top: 40px;}
.tab_br{display: block;}

/* トップページ */
.top_inner{width: 90%; }

.top_inner .top_galley{column-gap: 15px!important;}
.top_inner .top_galley figure{width: calc((100% - 45px)/4)!important; padding-top: calc((((100% - 45px)/4)/3)*2);}



/* お問合せ */
.contact_item{display: block; padding: 20px 5%;}
.contact_tit{margin: 0 0 25px 50px; width: initial;}
.contact_essential .contact_tit{margin-left: 50px; width: initial;}



    
    
/* フォーム */
    .wpcf7-form-control-wrap{}
    .contact_txt, .contact_adress, .contact_txtarea{width: 100%;}
    .contact_txt input{width:  calc(100% - 16px); margin: 0 auto;}
    .contact_txtarea textarea{width:  calc(100% - 16px);}
    .contact_adress input{width: 100%; margin-left: 0;}
    input[type="checkbox"]{padding: 8px;}
    .form-width{max-width: 100%;}
    .contact_sec .wpcf7-spinner{display: block;}
    .contact_adress_sub .wpcf7-form-control-wrap{margin-top: 15px; }


    
    

::placeholder{ color: #999;}
	

/* 旧Edge対応 */
::-ms-input-placeholder{ color: #999; }
/* IE対応 */
:-ms-input-placeholder{ color: #999; }



}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 TAB CSS END
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 PC CSS
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
@media print, screen and (min-width:1120px) and (max-width:1470px){

/* フォントサイズ10px */
html{ font-size: 62.5%; }

/* 基本のフォントサイズ */
body{  font-size: 1.8rem; }

/* 非表示用 */
.nonePC		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{height: 100px;}



/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ display: none; }


.footer_sns_list{flex-direction: row; justify-content: center;}



/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */



/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{padding-top: 100px;}
.pc_br{display: block;}
.headline{padding-top: 120px; margin-top: -120px; display: block;}

/* トップページ */
.top_inner{width: 90%; }



/* サンクスページ */
.thanks_sec{max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0 80px;
  font-size: 1.8rem;}




}
/* ----------------------------------------------------------
 PC CSS END
---------------------------------------------------------- */
/* ----------------------------------------------------------
 PC WIDE CSS
---------------------------------------------------------- */
@media screen and (min-width:1471px){
/* フォントサイズ10px */
html{ font-size: 62.5%; height: 100%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem;  }

/* 非表示用 */
.nonePCWIDE		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{height: 100px;}



/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ display: none; }


.footer_sns_list{flex-direction: row; justify-content: center;}



/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */



/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.wrapper{padding-top: 100px;}
.pc_br{display: block;}
.headline{padding-top: 120px; margin-top: -120px; display: block;}



/* サンクスページ */
.thanks_sec{max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0 80px;
  font-size: 1.8rem;}




}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 PCWIDE CSS END
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */