@charset "UTF-8";

/* reset css
---------------------------------------------------------------------------- */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:bottom;
    background:transparent;
}

body {
    line-height:1;
  
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:.5em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
img{max-width: 100%}

/* common class
---------------------------------------------------------------------------- */
*{box-sizing: border-box;}

body, p, h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
body{
  overflow-x: hidden;
}
.hover-opa{
  transition: .3s ease;
  opacity: 1;
}
.hover-opa:hover{
  opacity: .7;
}
@media screen and (min-width:768px) { .pc-none{ display: none!important; } }
@media screen and (max-width:767px) {	.sp-none{ display: none!important; } }

p {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #434343;
  line-height: 1.4em;
  padding: 0px 0px 5px 5px;
}
  @media screen and (max-width:767px) {
    p {
      font-size: 3.2vw;
      line-height: 1.4em;
      padding: 0 0 1.33vw 1.33vw;
    }
  }

p.strng {
  font-size: 18px;
  font-weight: bold;
  color: #ff9900;
  padding: 15px 0px 5px 5px;
}
  @media screen and (max-width:767px) {
    p.strng {
      font-size: 4.8vw;
      padding: 1.78vw 0 1.33vw 1.33vw;
    }
  }

p.caution {
  font-size: 12px;
  color: #FF6666;
}
  @media screen and (max-width:767px) {
    p.caution {
      font-size: 3.2vw;
    }
  }
.t_clr_red {
  color: #ff6600;
  font-size: 0.9em;
}
p#pagetop{
  cursor: pointer;
  font-weight: bold;
  opacity: .7;
}
p#pagetop:hover{
  opacity: .7;
}

h3.title {
  align-items: center;
  background-image: url(/glb_img/tti_head2.jpg);
  font-size: 18px;
  color: #434343;
  display: flex;
  background-repeat: no-repeat;
  line-height: 1;
  margin: 10px 0px 20px 5px;
  padding-left: 20px;
  height: 40px;
  width: 605px;
}
  @media screen and (max-width:767px) {
    h3.title {
      align-items: center;
      background: url(/glb_img/tti_head2.jpg) left center /cover no-repeat;
      font-size: 4.26vw;
      line-height: 1;
      margin: 1.33vw 0 2.66vw;
      padding-left: 4vw;
      height: 8vw;
      width: auto;
    }
  }
.con_txt {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 30px;
  width: 605px;
}
  @media screen and (max-width:767px) {
    .con_txt {
      display: block;
      margin: 0 auto 4vw;
      width: auto;
    }
  }
.con_txt img{
  margin-right: 10px;
  width: 250px;
}
  @media screen and (max-width:767px) {
    .con_txt img{
      display: block;
      margin: 0 auto 2.66vw;
      width: 66.66vw;
    }
  }

.con_txt .con_txt-inner{
  flex: 1;
}
h4, h5 {
  font-size: 14px;
  color: #434343;
  margin-top: 5px;
  padding: 0 0 5px 5px;
}
  @media screen and (max-width:767px) {
    h4, h5 {
      font-size: 4.26vw;
      margin: 1.33vw 0;
      padding: 0 0 1.33vw 1.33vw;
    }
  }

table{
  margin: 0 auto 20px;
}
  @media screen and (max-width:767px) {
    table{
      margin: 0 auto 5.33vw;
    }
  }

table th,
table td{
  border-bottom: 3px solid #fff;
  font-size: 14px;
  font-weight: normal;
  color: #434343;
  line-height: 1.5;
  padding: 5px;
  vertical-align: top;
}
  @media screen and (max-width:767px) {
    table th,
    table td{
      border-bottom: 2px solid #fff;
      font-size: 3.2vw;
      padding: .66vw;
    }
  }

table.type01{
  width: 95%;
}
  @media screen and (max-width:767px) {
    table.type01{
      width: 100%;
    }
  }

table.type01 th{
  border-right: 4px solid #ff9900;
  background-color: #f0f0f0;
  width: 35%;
}
table.type01 input[type="text"]{
  width: 80%;
}
table.type01 textarea{
  height: 5em;
  width: 80%;
}
  @media screen and (max-width:767px) {
    table.type01 input[type="text"]{
      width: 70%;
    }
    table.type01 textarea{
      height: 5em;
      width: 80%;
    }
  }

table tr:last-child th{
  border-bottom: none; 
}
table.type01 td{
  width: 65%;
}
table.type02{
  width: 85%;
}
  @media screen and (max-width:767px) {
    table.type02{
      width: 100%;
    }
  }
table.type02 th{
  border-right: 4px solid #099fdc;
  background-color: #f6f6dd;
  width: 30%;
}
table.type02 td{
  background-color: #f3f3f3;
  width: 70%;
}
/* header 
---------------------------------------------------------------------*/
header .head-wrap{
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 10px 0;
  width: 910px;
}
  @media screen and (max-width:767px) {
    header .head-wrap{
      padding: 1.33vw;
      width: auto;
    }
    header .head-wrap .head_left{
      width: 45vw;
    }
    header .head-wrap .head_right{
      width: 45vw;
    }
  }

header nav{
  background: linear-gradient(to bottom, #4fc3f2 0, #039cd8 100%);
}
  @media screen and (max-width:767px) {
    header nav{
      padding: 1.86vw;
      position: relative;
    }
    header nav .sp-btn{
      display: block;
      height: 5vw;
      margin: 0 auto;
      position: relative;
      width: 7vw;
      z-index: 3;
    }
    header nav .sp-btn .bar{
      background: #fff;
      border-radius: 1.5px;
      display: block;
      font-size: 0;
      height: 2px;
      position: absolute;
      transition: .3s ease;
      width: 100%;
    }
    header nav .sp-btn .bar.top{
      left: 0;
      top: 0;
    }
    header nav .sp-btn .bar.mid{
      left: 0;
      top: calc(50% - 1px);
    }
    header nav .sp-btn .bar.btm{
      left: 0;
      bottom: 0;
    }
    header nav .sp-btn.open .bar.mid{
      opacity: 0;
    }
    header nav .sp-btn.open .bar.top{
      transform: rotate(405deg);
      top: calc(50% - 1px);
    }
    header nav .sp-btn.open .bar.btm{
      transform: rotate(-405deg);
      top: calc(50% - 1px);
    }
  }
header nav ul{
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 5px 0;
  width: 910px;
}
  @media screen and (max-width:767px) {
    header nav ul{
      display: none;
      padding: 1.33vw 2.66vw 2.66vw;
      width: auto;
    }
  }

@media screen and (min-width:768px) {
  header nav li{
    align-items: center;
    border-left: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    height: 44px;
    width: auto;
  }
  header nav li:nth-child(1),
  header nav li:nth-child(4),
  header nav li:nth-child(5),
  header nav li:nth-child(7){
    flex-basis: 11%;
  }
  header nav li:nth-child(2){
    flex-basis: 20%;
  }
  header nav li:nth-child(3){
    flex-basis: 20%;
  }
  header nav li:nth-child(6){
    flex-basis: 16%;
  }
  header nav li:nth-child(7){
    border-right: 1px solid #fff;
  }
  header nav li a{
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 15px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    text-decoration: none;
    width: 100%;
  }
  header nav li a:hover span{
    display: inline-block;
    position: relative;
  }
  header nav li a span::after{
    border-bottom: 2px solid #fdb602;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    position: absolute;
    bottom: -5px;
    width: 100%;
    transition: 1s ease;
    opacity: 0;
  }
  header nav li a:hover span::after{
    opacity: 1;
    transition: .3s ease;
  }
}

  @media screen and (max-width:767px) {
    header nav li{
      align-items: center;
      display: flex;
      width: 100%;
    }
    header nav li a{
      align-items: center;
      border-bottom: 1px solid #fdb602;
      color: #fff;
      display: flex;
      font-size: 15px;
      font-weight: 400;
      height: 100%;
      justify-content: flex-start;
      text-decoration: none;
      padding: 2.66vw;
      width: 100%;
    }
  }

/* footer 
---------------------------------------------------------------------*/
footer{
  background: #cfcfcf;
}
footer .footer-wrap{
  align-items: center;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  padding: 20px;
  width: 910px;
}
  @media screen and (max-width:767px) {
    footer .footer-wrap{
      flex-direction: column-reverse;
      justify-content: center;
      padding: 2.66vw;
      width: auto;
    }
  }

footer .footer-wrap address{
  background: #fff;
  border-radius: 6px;
  font-style: normal;
  line-height: 1.5;
  font-size: 12px;
  padding: 10px;
}
  @media screen and (max-width:767px) {
    footer .footer-wrap address{
      border-radius: .66vw;
      line-height: 1.5;
      font-size: 3.2vw;
      padding: 2.66vw;
    }
  }

footer .footer-wrap address a{
  color: #ff9308;
  font-weight: 700;
  text-decoration: none;
}
footer .footer-wrap ul{
  align-items: center;
  display: flex;
  list-style: none;
}
  @media screen and (max-width:767px) {
    footer .footer-wrap ul{
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2.66vw;
      justify-content: space-between;
    }
  }

footer .footer-wrap ul li{
  padding: 0 0 0 10px;
}
  @media screen and (max-width:767px) {
    footer .footer-wrap ul li{
      background: #f0f0f0;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      width: 50%;
    }
  }

footer .footer-wrap ul li a{
  color: #333;
  font-size: 14px;
}
  @media screen and (max-width:767px) {
    footer .footer-wrap ul li a{
      color: #333;
      display: block;
      font-size: 3.73vw;
      text-align: center;
      text-decoration: none;
      padding: 2.66vw 0;
      width: 100%;
    }
  }

footer small{
  background: linear-gradient(to bottom, #4fc3f2 0, #039cd8 100%);
  color: #fff;
  display: block;
  font-size: 12px;
  text-align: center;
  padding: 14px 0;
  width: 100%;
}
  @media screen and (max-width:767px) {
    footer small{
      font-size: 3.2vw;
      padding: 3.73vw 0;
    }
  }

/* layout 
---------------------------------------------------------------------*/
main .cont-wrap{
  display: flex;
  justify-content: space-between;
  margin: 20px auto 0;
  padding: 0 0 40px;
  width: 880px;
}
  @media screen and (max-width:767px) {
    main .cont-wrap{
      display: block;
      margin: 5.33vw auto 0;
      padding: 0 2.66vw;
      width: 100%;
    }
  }

main .cont-wrap article{
  width: 630px;
}
  @media screen and (max-width:767px) {
    main .cont-wrap article{
      width: auto;
    }
  }

main .cont-wrap aside{
  width: 220px;
}
  @media screen and (max-width:767px) {
    main .cont-wrap aside{
      margin: 5.33vw 0;
      text-align: center;
      width: auto;
    }
  }

main .cont-wrap aside .side_menu_box a{
  display: block;
  margin-bottom: 5px;
}
  @media screen and (max-width:767px) {
    main .cont-wrap aside .side_menu_box a{
      display: inline-block;
      margin-bottom: 1.33vw;
    }
  }

main .cont-wrap aside .side_menu_box a img{
  display: block;
  height: auto;
  width: 100%;
}
  @media screen and (max-width:767px) {
    main .cont-wrap aside .side_menu_box a img{
      width: 58.66vw;
    }
  }

/* parts 
---------------------------------------------------------------------*/
/* top */
.idxTopt-wrap{
  background: url("../glb_img/topImg_imdex.jpg") center center /cover no-repeat;
  height: 290px;
  margin: 20px auto;
  width: 890px;
}
  @media screen and (max-width:767px) {
    .idxTopt-wrap{
      background: url("../glb_img/topImg_imdex.jpg") center center /cover no-repeat;
      height: 30.58vw;
      margin: 2.66vw 2.66vw 0;
      width: auto;
    }
  }

.idxTopt-wrap h1{
  text-align: left;
  color: #FF9900;
  font-size: 30px;
  line-height: 1.5;
  padding: 40px 0px 0px 40px;
}
  @media screen and (max-width:767px) {
    .idxTopt-wrap h1{
      font-size: 3.73vw;
      line-height: 1.2;
      padding: 2.66vw 0 0 2.66vw;
    }
  }

.idxTopt-wrap h2{
  text-align: left;
  color: #666666;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.6em;
  padding: 10px 0px 0px 40px;
}
  @media screen and (max-width:767px) {
    .idxTopt-wrap h2{
      font-size: 3.2vw;
      letter-spacing: 0;
      line-height: 1.25em;
      padding: 1.33vw 0 0 2.66vw;
    }
  }

.top-cont-flx{
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
  @media screen and (max-width:767px) {
    .top-cont-flx{
      display: block;
      margin-bottom: 0;
    }
  }

.top-cont-flx .cont-inner{
  width: 300px;
}
  @media screen and (max-width:767px) {
    .top-cont-flx .cont-inner{
      margin: 0 auto 5.33vw;
      width: 80vw;
    }
  }

.top-cont-flx .cont-inner a{
  display: block;
  text-decoration: none;
  width: 100%;
}
.top-cont-flx .cont-inner a p{
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #434343;
  line-height: 1.4em;
  padding: 0px 0px 5px 5px;
}
  @media screen and (max-width:767px) {
    .top-cont-flx .cont-inner a p{
      font-size: 3.2vw;
      padding: 0 0 1.33vw 1.33vw;
    }
  }

.top-cont-flx .cont-inner a img{
  margin-bottom: 20px;
}
  @media screen and (max-width:767px) {
    .top-cont-flx .cont-inner a img{
      margin-bottom: 2.66vw;
    }
  }

.top-cont-flx .cont-inner a img.title-img{
  margin-bottom: 10px;
}
  @media screen and (max-width:767px) {
    .top-cont-flx .cont-inner a img.title-img{
      margin-bottom: 1.33vw;
    }
  }

/* sub */
.conToptxt{
  margin-bottom: 20px;
  position: relative;
}
  @media screen and (max-width:767px) {
    .conToptxt{
      margin-bottom: 2.66vw;
    }
  }

.conToptxt .inner-title{
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  left: 0;
  padding-left: 20px;
  position: absolute;
  top: 0;
  width: 100%;
}
  @media screen and (max-width:767px) {
    .conToptxt .inner-title{
      padding-left: 5.33vw;
    }
  }

.conToptxt .inner-title h1.conTop{
  text-align: left;
  color: #FF9900;
  font-size: 30px;
}
  @media screen and (max-width:767px) {
    .conToptxt .inner-title h1.conTop{
      font-size: 5.33vw;
      margin-bottom: .66vw;
    }
  }

.conToptxt .inner-title h2.conTop2{
  text-align: left;
  color: #666666;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.12em;
}
  @media screen and (max-width:767px) {
    .conToptxt .inner-title h2.conTop2{
      font-size: 3.73vw;
      line-height: 1.25;
    }
  }
.conTop_oth{
  margin-bottom: 30px;
  position: relative;
}
  @media screen and (max-width:767px) {
    .conTop_oth{
      margin-bottom: 3.73vw;
    }
  }

.conTop_oth .inner-title{
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  left: 0;
  padding-left: 20px;
  position: absolute;
  top: 0;
  width: 100%;
}
  @media screen and (max-width:767px) {
    .conTop_oth .inner-title{
      padding-left: 5.33vw;
    }
  }

.conTop_oth .inner-title h1.conTop_gl{
  text-align: left;
  color: #434343;
  font-size: 30px;
}
  @media screen and (max-width:767px) {
    .conTop_oth .inner-title h1.conTop_gl{
      font-size: 5.33vw;
      margin-bottom: .66vw;
    }
  }

.conCenter_dm {
  text-align: left;
  margin: 0px auto 20px;
  width: 610px;
}
  @media screen and (max-width:767px) {
    .conCenter_dm {
      text-align: left;
      margin: 0px auto 20px;
      width: auto;
    }
  }

.conCenter_dm .flx-box{
  align-items: flex-start;
  display: flex;
}
.conCenter_dm .flx-box img{
  width: 150px;
  height: auto;
  margin: 0 15px 15px 0;
}