@charset "utf-8";


/*-- ページ内共通パーツ --*/
a.ttt_gglmp{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  text-decoration: none;
  color:var(--ttt-col-main);
  background-color: #fff;
  box-shadow: 2px 4px 4px rgba(0,0,0,0.2);
  min-height: 3.5em;
  max-height: 4.5em;
  padding: .5em 1em; 
  transition: color .5s, box-shadow .5s;
}

a.ttt_gglmp p{
  position: relative;
  width:8em;
  margin: auto;
  border-bottom: solid 1px #fff;
    transition:border .5s;
}

a.ttt_gglmp p::before{
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  position: absolute;
  top:0;
  bottom: 0;
  left:-2em;
  margin: auto;
   background-image: url("../img/ic_googlemaps.png"); 
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;  
}

a.ttt_gglmp p::after{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top:0;
  bottom: 0;
  right:-1.5em;
  margin: auto;
   background-image: url("../img/ic_outside.svg");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;  

}

/*-- ページ内共通パーツ --*/


#ttt_head{
  position: relative;
  width:100%;
}

#ttt_head .ttt_flex{
  display: flex;
  justify-content: space-around;
  width:100%;
  max-width: 1600px;
  margin: 0 auto 0;
  padding-top: 24px;
  aspect-ratio: 5 / 1;
}

#ttt_head .ttt_flex > div{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

#ttt_head .ttt_flex > div:first-of-type{
  width:60%;
}
#ttt_head h1{
  width:96%;
  max-width: 680px;
}

#ttt_head .ttt_flex > div:last-of-type{
  width:40%;
}
#ttt_head .ttt_flex > div:last-of-type p{
  max-width: 100%;
  background-color: rgba(0,85,170,0.8); 
  padding: 1.5em 2vw;
  color:#fff;
  line-height: 1.6;
  text-align: right;
    font-weight: bold;
  text-shadow: 0px 0px 8px rgba(0,34,100,1); 
}

#ttt_head .ttt_flex > div:last-of-type span{
  display: inline-block;
  white-space: nowrap;
  font-size: calc(1em + (1vw - 10px));
}

#ttt_head .ttt_flex > div:last-of-type span:first-of-type{
  font-size: calc(1.5em + ((1vw - 10px) * 1.125));
  text-align: left;
}


#ttt_maincoutents{
width:100%;
  margin: 80px auto;
}

#ttt_maincoutents .ttt_unit{
  width:90%;
  max-width: 1200px;
  margin: auto;
}
#ttt_maincoutents .ttt_unit_l{
  width:96%;
  max-width: 1640px;
}


#ttt_maincoutents .ttt_grid{
  display: -ms-grid;
  display: grid; 
  -ms-grid-columns: 35% 0px 65%; 
  grid-template-columns: 35% 65%; 
  -ms-grid-rows: auto 0px auto 0px auto 0px auto; 
  grid-template-rows: auto auto auto auto; 
  gap: 0px 0px; 
      grid-template-areas: 
    "ttt_photo1 ttt_oatitle"
    "ttt_photo1 ttt_txtarea"
    "ttt_photo2 ttt_txtarea"
    "ttt_photo3 ttt_txtarea"; 
}

.ttt_photo1 { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: ttt_photo1; position: relative;}
.ttt_oatitle { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: ttt_oatitle; }
.ttt_txtarea { -ms-grid-row: 3; -ms-grid-row-span: 5; -ms-grid-column: 3; grid-area: ttt_txtarea; }
.ttt_photo2 { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: ttt_photo2; }
.ttt_photo3 { -ms-grid-row: 7; -ms-grid-column: 1; grid-area: ttt_photo3; }


.ttt_grid div[class^="ttt_photo"]{
  margin-bottom: 8px;
  aspect-ratio: 16 / 9;
}

.ttt_txtarea{
  padding: 0;
}

.ttt_oatitle h2{
  position: relative;
  width:20em;
  background: var(--ttt-col-main);
 background: -moz-linear-gradient(left,  var(--ttt-col-sub) 0%, var(--ttt-col-main) 100%);
 background: -webkit-linear-gradient(left,  var(--ttt-col-sub)  0%,var(--ttt-col-main)  100%);
 background: linear-gradient(to right,  var(--ttt-col-sub)  0%,var(--ttt-col-main)  100%);
 font-size: 1.125em;
  font-weight: bold;
  color:#fff;
  padding: 0.75em 0.5em 0.5em 2em;
  margin:2.5em 0 0 2.5em;
  border-radius: 2em;
}

.ttt_oatitle h2::before{
  content: "";
  display: block;
  width:4em;
  height: 4em;
  position: absolute;
  left:-2em;
  bottom: 0;
  background-image: url("../img/ic_fish_s.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
}

.ttt_textinner{
  background-color: #fff;
  margin: -1em 0 0 -40px;
  padding: 3.5em 2em 4em 64px;
  line-height: 1.6;
  border-radius:0 80px 80px 0;
}

.ttt_textinner > p{
  font-size: 1rem;
  color:var(--ttt-col-main);
}

.ttt_textinner > p:first-of-type{
  font-weight: bold;
  font-size: 1.25em;
  color:var(--ttt-col-main);
  background: #ffffff;
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,var(--ttt-col-yl) 51%,var(--ttt-col-yl) 100%);
  line-height: 1.25;
  margin-bottom: 1.5em;
}

.ttt_textinner > p span{
  display: inline-block;
}
.ttt_textinner > p span:first-of-type, .ttt_textinner > p span:last-of-type{
  white-space: nowrap;
}

.ttt_textinner h3{
  margin-top:1em;
  width:30%;
}

.ttt_textinner h4{
  margin-top:0.5em;
  color:var(--ttt-col-main);
  font-size:1.25em;
  font-weight:bold;
}

.ttt_textinner h4::before{
  content:"――★ ";
  color:var(--ttt-col-sub2);
}

div.ttt_popup{
    position: relative;
  cursor: pointer;
  box-shadow: 2px 4px 4px rgba(0,0,0,.2);
}

div.ttt_popup::after{
content: "";
  display: block;
  width:40px;
  height: 40px;
  position: absolute;
  right:0;
  bottom:0;
  background-image: url("../img/ic_zoom.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  transition: width .5s, height .5s;
}

.ttt_data{
  position: relative;
  margin:2em 0; 
  padding: 0;
  background: #ffffff;
  background: linear-gradient(to bottom,  #ffffff 0%,#aae8ff 100%);
  background-repeat: no-repeat;
  background-position: top 40px center;
}

.ttt_data h2{
  font-size: 1.75em;
  color:var(--ttt-col-main);
  font-weight: bold;
  border-bottom: solid 16px var(--ttt-col-main);
  margin-bottom:-8px;
  width:70%;
  margin-left: auto;
  padding-right: 8vw;
  text-align: right;
  z-index: 10;
}

.ttt_data h2 p{
  width:4.35em;
  margin-left: auto;
  position: relative;
  margin-bottom: -0.40em;
}

.ttt_data h2 p::after{
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  bottom:0.3em;
  background-image: url("../img/ic_fisherman.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;  
}

.ttt_data h2 p::first-letter{font-size: 40px}

.ttt_dataarea{
  color:var(--ttt-col-main);
}

div.ttt_data::before{
  content:"";
  display: block;
  width:30%;
  aspect-ratio: 4 / 3;
  background-image: url("../img/bg_fish.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  position: absolute;
  bottom:0;
  right:0;
}

.ttt_dataarea > p:first-of-type{
  color:var(--ttt-col-main);
  font-weight: bold;
  text-align: right;
  padding-top: 1.5em;
}

.ttt_dataarea > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  margin: 16px 0;
  z-index: 8;
}

.ttt_dataarea > ul  li{
  display: flex;
  min-width: calc(100% / 3);
  padding: 1vw;
}

ul.ttt_device5 li{
  min-width: calc(100% / 5);
}

ul.ttt_device4 li{
  min-width: calc(100% / 4);
}

.ttt_dataarea > ul > li > div{
  width: 100%;
background-color: #fff;
background: url("../img/bg_bdr_l.svg"), rgb(255,255,255);
background: url("../img/bg_bdr_l.svg"), linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(232,251,255,1) 100%);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 17em auto, 100% 100%;
  padding-bottom: .5em;
}


.ttt_dataarea > ul > li{
  width: calc(100% / 3);
}

.ttt_dataarea > ul > li.ttt_item2{
  width:calc((100% / 3) * 2);
}

.ttt_dataarea > ul > li.ttt_item3{
  width:100%;
}

/*-- 出港 --*/
.ttt_dataarea > ul > li.ttt_dp{
  width:100%;
  padding: 0 1vw 3em;
}

.ttt_dataarea > ul > li.ttt_dp > div{
  padding-bottom: 1.5em;
}
.ttt_dp .ttt_flex {
  justify-content: space-between;
  align-items: center;
  padding: 0 1em;
}

li.ttt_dp div.ttt_flex > ul, li.ttt_dp div.ttt_flex > div{
   width: calc(100% / 3);
}

li.ttt_dp div.ttt_flex > ul:only-child{
   width:100%;
}


li.ttt_dp div.ttt_flex > ul > li{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}

li.ttt_dp h4{
  display: block;
  width:100%;
  margin: 0.5em 0;
}

li.ttt_dp h4::before{
  content: "■";
}

li.ttt_dp h4:empty::before{
  content:"";
}

li.ttt_dp h4 + p{
  padding-left: 1em;
}

.ttt_dp a.ttt_gglmp{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width:96%;
  margin: 0 auto;
  padding: .5em 1em .25em; 
}

.ttt_dp a.ttt_optionlink{
  display: block;
  width:calc(100% - 3em);
  position: relative;
  background-color: #258F00;
  padding:1em 1em 1em 2.5em; 
  margin: 0.75em auto;
  color:#fff;
  text-decoration: none;
  box-shadow: 2px 4px 4px rgba(0,0,0,.2);
}

.ttt_dp a.ttt_optionlink::after{
  content: "★";
  display: block;
  height: 1em;
  font-size: 1.75em;
  color:#fff;
  position: absolute;
  top:0;
  left:0.25em;
  bottom: 0;
  margin: auto;
}

.ttt_dp a.ttt_optionlink::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -2em;
  margin-top: -1em;
  border: 1em solid transparent;
  border-right: 1.5em solid #258F00;
}

.ttt_dp a.ttt_optionlink.ttt_olink{
  padding:1em 2.5em 1em 2.5em; 
  background-image: url("../img/ic_outside_w.svg");
  background-repeat: no-repeat;
  background-size: 1.5em auto;
  background-position: right 8px center;
}



/*-- 連絡先 --*/
.ttt_dataarea > ul > li.ttt_contact{
  width: calc((100% / 3) * 2);
  margin-left: auto;
    align-self: flex-start;
}

.ttt_dataarea > ul > li.ttt_contact > div{
  width: 100%;
background-color: #fff;
background: url("../img/bg_bdr.svg"), rgb(255,255,255);
background: url("../img/bg_bdr.svg"), linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(232,251,255,1) 100%);
    background-repeat: no-repeat;
  background-position: left top;
  background-size: 24em auto, 100% 100%;
  padding-bottom: 2em;
}


.ttt_dataarea > ul h3{
  position: relative;
  width: 16em;
  padding: .5em 0.5em 0.5em 4.5em;
  color:var(--ttt-col-main);
  font-size: 1em;
  font-weight: bold;
}
.ttt_dataarea > ul h3::before{
  content: "";
  display: block;
  position: absolute;
  bottom:0;
  left:0;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  width: 4em;
  height: 4em;
}

.ttt_dataarea > ul > li.ttt_dp h3::before{
  background-image: url("../img/ic_dp.svg");
    width: 4.5em;
  height: 4.5em;
}

.ttt_dataarea > ul > li.ttt_place h3::before{
  background-image: url("../img/ic_point.svg");
}

.ttt_dataarea > ul > li.ttt_device h3::before{
  background-image: url("../img/ic_gim.svg");
}

.ttt_dataarea > ul > li.ttt_result h3::before{
  background-image: url("../img/ic_results.svg");
}

.ttt_dataarea > ul > li.ttt_contact h3{
  text-align: right;
  color:#fff;
  width:24em;
}


ul.ttt_datadtl{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

ul.ttt_datadtl li{
  display: block;
  width: 100%;
}

ul.ttt_datadtl .ttt_flex{
  padding: 1.5em 0 0;
align-items: center;
}

ul.ttt_datadtl .ttt_flex p{
  width: calc(100% - 4em);
}
ul.ttt_datadtl .ttt_flex a{
  display: block;
  width:4em;
  padding: .5em;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }

ul.ttt_datadtl li > p{
  padding: 1.5em 0.5em 0.5em;
  line-height:1.6;
}

.ttt_contact li{
  padding: 2em 1em 0 2em !important;
}

.ttt_contact p{
  color:var(--ttt-col-main);
  min-width: 50%;
  font-weight: bold;
  padding-right:2.5em;
}

.ttt_contact a{
  display: block;
  position: relative;
color:var(--ttt-col-main);
  text-decoration: none;
  font-weight: bold;
}
.ttt_contact a::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top:0;
  left: -2em;
  bottom: 0;
  margin: auto;
  background-image: url("../img/ic_tel.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.ttt_contact a.ttt_linebtn::before{
  background-image: url("../img/LINE_APP_iOS.png");
}

#ttt_check h2{
  width:100%;
  background-image: url("../img/bg_hdbdr_l.svg"), url("../img/bg_hdbdr_r.svg");
  background-repeat: no-repeat;
  background-position: left center, right center;
  background-size: 30vw auto;
}

#ttt_check h2 img{
  display: block;
  margin: 0 auto;
  max-width: 400px;
  width:25vw;
}

#ttt_check .ttt_flex{
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 24px auto 80px;
  background-color: rgba(209,235,255,0.40);
  padding: .5em 8px;
}

#ttt_check .ttt_flex > li{
  width:30%;
  margin: 0.5em 1% 2em;
}
#ttt_check .ttt_flex > li.ttt_100{
  width:100%;
  max-width: 1000px;
  margin:0 auto 1em;
}

#ttt_check li h3{
background-image: url("../img/bg_chkhd.svg");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 80% auto;
font-size:1.25em;
font-weight:bold;
text-align:center;
color:var(--ttt-col-main);
padding:0 0 0.5em;
margin:1em 0 0;
}

#ttt_check a.ttt_gglmp{
  position: relative;
  margin: 1.5em auto 0;
}

#ttt_check a.ttt_gglmp::before{
  content: "";
  display: block;
  position: absolute;
  top: -1.5em;
  left: calc(50% - 1em);
  border: 0.75em solid transparent;
  border-bottom: 1em solid #fff;
}
 
#ttt_check .ttt_flex > li > p{
  font-size: 0.875em;
  line-height: 1.5;
}

#ttt_prarea{
  background-color: #fff;
  padding: 40px 0;
  background-image: url("../img/bg_pr_l.svg"),url("../img/bg_pr_r.svg");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  background-size: 40% auto;
}

#ttt_prarea .ttt_flex{
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
  align-content: space-between;
}

#ttt_prarea .ttt_flex > div:first-of-type{
  display: flex;
  width: 50%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: space-between;
  padding: 1em;
}

#ttt_prarea .ttt_flex h2,#ttt_prarea .ttt_flex p, #ttt_prarea .ttt_flex a{
  display: block;
  width:80%;
}

#ttt_prarea .ttt_flex > div:last-of-type{
  display: flex;
  width: 50%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}

#ttt_linkarea{
  background-image: url("../img/bg_pr.jpg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  padding: 4vw 1vw;
  margin: 80px 0;
}

#ttt_linkarea ul{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}

#ttt_linkarea li{
  width:22%;
  max-width: 320px;
}

#ttt_linkarea li a{
  display: block;
  width:100%;
  height: 100%;
}



@media screen and (min-width:1600px){
  #ttt_head .ttt_flex > div:last-of-type span{
  font-size: 26px;
}

#ttt_head .ttt_flex > div:last-of-type span:first-of-type{
  font-size: 36px;
}
  
  
}



@media screen and (min-width:801px){
    
  div.ttt_popup:hover{
  box-shadow: none;
}
  div.ttt_popup:hover::after{
      width:56px;
  height: 56px;
  }
a.ttt_gglmp:hover{
  box-shadow: none;
  color:  var(--ttt-col-sub2);
  }
  
  a.ttt_gglmp:hover p::before, a.ttt_gglmp:hover p::after{
    opacity: 0.7;
  }
  
  ul.ttt_datadtl .ttt_flex a:hover{
box-shadow: none;
  }
  #ttt_linkarea li a:hover{
    background-color: #fff;
  }
  #ttt_linkarea li a:hover img{
    opacity: 0.8 !important;
  }
  
}


@media screen and (max-width:800px){
  #ttt_head{
background: none;
    padding: 0;
}
  
  #ttt_head .ttt_flex{
  flex-wrap: wrap;
    aspect-ratio:auto;
    padding-top: 0;
      background-image: url("../img/hd_bg_common.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  
#ttt_head .ttt_flex > div{
  width:100% !important;
  padding: 0 !important;
}
#ttt_head h1{
  width:90%;
  margin-bottom: 2em;
    padding-top: 4vw;
}
  #ttt_head .ttt_flex > div:last-of-type p{
  width: 100% !important;
    max-width: none;
  background-color: rgba(0,85,180,0.8); 
  padding: 1em 2vw;
  text-align: center;
}
  
  #ttt_head .ttt_flex > div:last-of-type span{
  font-size:  calc(1em + 1vw);
}
  
  #ttt_head .ttt_flex > div:last-of-type span:first-of-type{
  font-size: calc(1.5em + 1vw);
  text-align: left;
}
  
  #ttt_maincoutents{
    width: 100%;
    margin: 40px auto;
  }
  
#ttt_maincoutents .ttt_grid{
  display: grid; 
  grid-template-columns: 100%; 
  grid-template-rows: auto auto auto auto auto ;
  gap: 0px 0px; 
  grid-template-areas: 
    "ttt_oatitle"
    "ttt_photo1"
    "ttt_txtarea"
    "ttt_photo2"
    "ttt_photo3"; 
}

.ttt_oatitle h2{
  width:96%;
  margin: 0 auto 8px;
  text-align: center;
  }
  .ttt_oatitle h2::before{
  width:18vw;
  height: 18vw;
  left:-4vw;
}

  .ttt_textinner{
  margin: 0;
  padding: 1.5em 1em;
  border-radius:0;
}
  .ttt_textinner > p:first-of-type{
  font-size: 1.125em;
  background: var(--ttt-col-yl) ;
  margin-bottom: 1.5em;
  padding: 0;
}

    .ttt_textinner > p{
  font-size: 0.986em;
  }
  
    .ttt_textinner > p:first-of-type span:first-of-type{
      display: block;
      width:100%;
      background-color: #fff;
  }
  
  .ttt_textinner > p:first-of-type span:nth-of-type(2){
    padding: 0.5em 0.25em 0;
  }
  .ttt_textinner > p:first-of-type span:nth-of-type(3){
    padding: 0 0.25em 0.5em ;
  }

  .ttt_data .ttt_flex, .ttt_data ul{
    flex-wrap: wrap;
  }
  .ttt_data .ttt_flex > div, .ttt_data li{
    width: 100% !important;
    margin-bottom: 1em;
  }
  .ttt_data li{
        margin-bottom: 40px;
  }
  
     .ttt_contact li:first-of-type{
     margin-top: 1em;
  }
  
   .ttt_contact li{
     margin-bottom: 0;
  }
  
    .ttt_dp .ttt_flex{
      justify-content: center;
     align-items:flex-start;
  }

  .ttt_dp .ttt_flex ul{
     align-content:space-around;
}

li.ttt_dp div.ttt_flex > ul:first-of-type{
  width:calc(100% - calc(4em + 2vw));
}

li.ttt_dp div.ttt_flex > ul:nth-of-type(2){
  width:calc(4em + 2vw);
}

  .ttt_dp .ttt_flex > h4{
  width: 100%;
}

li.ttt_dp a.ttt_gglmp p{
  display:none;
}

li.ttt_dp .ttt_flex li{
  margin-bottom:0;
}

li.ttt_dp .ttt_flex ul:first-of-type li{
min-height:calc(4em + 4vw);
}

li.ttt_dp a.ttt_gglmp {
background-image:url(../img/ic_googlemaps.png);
background-repeat:no-repeat;
background-size: auto 80%;
background-position:center center;
margin:0.5em 0;
}


  .ttt_dp .ttt_flex > a, .ttt_dp .ttt_flex > p{
  width: 80%;
    margin: 1em auto;
}
  .ttt_dp a.ttt_optionlink::before{
  top: -1.25em;
  left: calc(50% - 1em);
  margin-top: -1em;
  border: 1em solid transparent;
  border-bottom: 1.5em solid #258F00;
}


  .ttt_contact li{
   flex-wrap: wrap;
    justify-content: flex-start;
    
  }
  .ttt_contact p{
    width: 96%;
    margin: 0 auto;
}

.ttt_contact a{
  width:80%;
  margin: 1em auto 0.5em;
  }
  
  .ttt_contact a::after{
    content: "";
    display: block;
    width: calc(100% + 2em);
    position: absolute;
    bottom:-0.75em;
    left:-2em;
    border-bottom: 1px var(--ttt-col-sub2) solid;
  }
  .ttt_contact a.ttt_linebtn{
    margin-top:0;
  }
  
    .ttt_contact li:only-child a::after{
      display: none;
  }
  
  
  #ttt_check h2{
  background-size: 25vw 4px;
}
  
  #ttt_check h2 img{
  width:46vw;
}
  
#ttt_check .ttt_flex{
flex-wrap: wrap;
}

#ttt_check .ttt_flex > li{
  width:96%;
  margin: 24px auto;
}

    #ttt_check .ttt_flex > li{
      order: 2;
  }
  #ttt_check .ttt_flex > li.ttt_sporder{
    order:1;
  }
  
  #ttt_prarea {
    background-size: 100% auto;
  }
  
  .ttt_flex{
    flex-wrap: wrap;
}
#ttt_prarea .ttt_flex > div{
  width: 100% !important;
  }
  
  #ttt_linkarea ul{
    flex-wrap: wrap;
  }
  
#ttt_linkarea li{
  width:44%;
  margin-bottom: 4vw;
  }

  .ttt_textinner h4{
    font-size:1em;
  }
  .ttt_textinner h4::before{
    content:"―★ ";
  }
}