@charset "UTF-8";

html {
font-size: 100%;
letter-spacing: 0.05em;
/*border: solid 1px #ff0000; /* 赤い枠線と */
/*background-color: #ffaaaa; /* うす赤い背景をつける */
}

html,body{
width: 100%;
padding:0; /*追加*/
margin:0; /*追加*/
}

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

a{
text-decoration: none;
}

html body{
position: relative;
}

body{
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0 auto;
padding-bottom: 100px;
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
word-wrap: break-word;
color: #333333;
vertical-align: baseline;
overflow-wrap: break-word
box-sizing: border-box;
/*border: solid 1px #000000; /* 黒い枠線と */
/*background-color: #888888; /* グレーの背景をつける */
}

/* ホバー */
.mouseHvr {
	opacity: 1;
}

.mouseHvr:hover {
	opacity: 0.8;
}

li{
list-style-type: none;
}

#tell {
font-family: 'Roboto', sans-serif;
font-size: 2rem;
}


/* ========================================
   header
========================================= */
header{
position: fixed;
left:0;
top: 0;
width: 100%;
height:70px;
z-index:999;
background-color: #fff/*#faf7ee*/;
border-bottom:5px #f1c40f solid;
box-sizing: border-box;
display: flex;
align-items: flex-end;
}

.header_left{
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-left: 2rem;
}

.header_company_catch{
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left:-10rem;
}

.header_company_catch h2{
font-size: 0.8rem;
}

.jts_logo{
width: 32%;
margin-left: 1rem;
padding-top: 0.3rem;
margin-right:0rem;
}

header_left img{
width: 500px;
height: 245px;
}



header ul{
height: 55px;
padding: 0;
text-align: center;
}

#pcNav ul li a{
color: #ffffff;
}

header h1{
font-family: /*'Noto Sans JP*/sans-serif;
font-size: 1.6rem;
white-space: nowrap;
margin-left: -1.6rem;

}

.header_tell_box
{
display: flex;
flex-direction: column;
align-items: flex-end;
margin:0 0 0 auto;
padding-right:2rem;
}

.tell-copy{
font-size: 0.8rem;
margin-top: 1.8rem;
background: linear-gradient(transparent 60%, #a7d6ff 50%);
}

#header_tell{

font-family: 'Roboto', sans-serif ;
}

header #tell{
font-size: 1.6rem;
}

/* ========================================
.flex_box side
========================================= */
.flex_box{
display: flex;
justify-content: center;
flex: 1;
flex-grow: 1;
width: 100%;
padding-top: 5rem;
overflow-y: scroll;
box-sizing: border-box;
/*border: solid 1px #0000ff; /* 青い枠線と */
/*background-color: #eeeeff; /* うす青い背景をつける */
}

#side{
display: flex;
flex-direction: column;
align-items: center;
width: 22%;
padding: 0;
margin:0 0.5rem 0 0.5rem;
}

#pcNav{
width:100%;
max-width: 220px;
margin-bottom: 10px;
margin-left: 0px;
}

#pcNav ul {
  width: 22%;
  max-width: 220px;
  margin: 0;
}

#pcNav ul li {
  max-width: 220px;
  border-bottom: 1px #ecf0f1 solid;
  width: 200px;
  height: 67px;
  text-align: center;
  line-height: 67px;
  background-color: #0066cc;
  color:#fff;
}

.b_box{
margin-left: -1rem;
}

.b_box img{
width:200px;
height:140px;
}

.banner01 {
width: 100%;
max-width: 220px;
}

.banner02 {
width: 100%;
max-width: 220px;
}
/* ========================================
#mainContents right
========================================= */
#mainContents{
width: 100vh;
height: auto;
margin:0;
padding: 0;
box-sizing: border-box;
}

#mainVisual{
margin: 0 ;
}

#mainVisual img{
width: 100%;
}

.inquiry_form{
display: flex;
justify-content: center;
align-items: center;

width: 100%;
margin:0  auto;
padding: 1.8rem 1rem 1.8rem 1rem;
}

.inquiry_form p{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: bold;
line-height: 1.6;
text-align: center;
}

.catch{
padding: 1rem 2rem 1rem 2rem;
}

.catch p{
font-size: 1.3rem;
margin-top: 15px;
white-space: nowrap;
}

#tell_underline{
font-family: 'Roboto', sans-serif;
font-size: 2rem;
width:20rem;
background: linear-gradient(transparent 60%, #a7d6ff 50%);
margin:0 auto;
}

#tell_underline{

}


.mail_form{
width: 100%;
height: auto;
margin: 0 auto;
}

.heading{
padding: 1rem 2rem;
background: #0066cc;
color: #ffffff;
text-align: center;
font-size: 1.6rem;
}
/* ========================================
menu
========================================= */
.menu{
padding-bottom:2rem;
width: 100%;
}

.bar{
margin-bottom: 1rem;
}

.menu_inner{
display: flex;
flex-wrap:wrap;
justify-content: space-around;
justify-content: center;
/*max-width: 770px;*/
}

.btn {
display: block;
position: relative;
width: 48%;
height: 160px;
margin: 0 auto;
margin-top: 1rem;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}

.btn_770{
display: block;
position: relative;
width: 98%/*770px*/;
height: 160px;
margin: 0 auto;
margin-top: 1rem;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}

.btn img {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
padding: 1rem;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}

.btn_770 img{
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:99%;
padding: 1rem;
-webkit-transition:.4s ease-in-out;
transition:.4s ease-in-out;
}

.btn :hover img:nth-of-type(2){
  opacity: 0;
}

.btn_770 :hover img:nth-of-type(2){
  opacity: 0;
}

.wrapp_770 img{
width:200%;
text-align: center;
}

.flow_1{
 padding-bottom: 140px;
}

.flow_1 img{
width: 100%;
text-align: center;
}

.pageTop{
margin-right: 0;
}
/* ========================================
footer
========================================= */
footer{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
margin-top:auto;
height:100px;
background-color:#ffcc33;
box-sizing: border-box;
}

footer ul {
text-align: center;
}

footer #tell{
font-size: 2rem;
}

.center_footer{
margin:0 auto;
}

.address{
text-align: center;
}

.info li{display: inline-block;
}

/* ========================================
スマホ用
========================================= */
@media screen and (max-width: 768px) {
body{
width: 100%;
}
.header_left{
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.header_company_catch{
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left:-12.5rem;
padding-right: 1rem;
}

.jts_logo{
margin-left: -1rem;
width:25%;
}

.header_company_catch{
display: flex;
flex-direction: column;
align-items: flex-end;
}

header h1{
font-size: 1.1rem;
font-weight: bold;
}
header h2{
font-size: 0.6rem;
white-space: nowrap;
}
.header_tell {
  display: none;
}
.header_tell_box{
display: none;
}

#side {
display: none;
}
#mainContents{
width: 100%;
margin: 0 auto;
}
#mainVisual {
width: auto;
}
#mainVisual img {
max-width:100%;
height: auto;
}
.inquiry_form {
display: block;
flex-direction: column;
width: 100%;
/*max-width: 375px;*/
margin-bottom: 2rem;
}
#tell{
font-size: 1.4rem;
color: #333333
}
.mail {
padding: 1rem;
}
.menu {
flex-flow: column;
justify-content:space-around;
align-content: space-around;
padding-top: 1rem;
}

.btn {
display: block;
position: relative;
width:375px;
height: 160px;
margin: 0 auto;
margin-top: 1rem;
overflow: hidden;
cursor: pointer;
}
.btn_770{
display: block;
position: relative;
width: 770px;
height: 160px;
margin: 0 auto;
margin-top: 1rem;
overflow: hidden;
cursor: pointer;
}
footer{
width: 100%;
}
footer #tell{
font-size: 1.4rem;
}
.menu h3 {
margin-bottom: 2rem;
}
.btn_770 {
margin-top: -2rem;
}
.btn_770 img {
with:99%;
max-width: 375px;
}
}