/* CSS Document */
/*--------------------------------------
背景設定
---------------------------------------*/


.bg_CLB{
    background-color: #5db6e7;
}

.bg_LGB{
    background-color: #a0d7e0;
}

.bgYe {
  background-color: #ffe34f;
}


.sea_wave{
    margin-bottom: -1%;
    
}


@media screen and (max-width:768px) {
  .bgYS {
    background-image: url("../img/exh/p_tomica_exh_12.jpg");
  }
    
}

@media screen and (max-width:480px) {
  .top_img {
    background: url("../img/top/p_tomica_top_16.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
  }

}
/*--------------------------------------
レイアウト
---------------------------------------*/
.box_center {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}

.header3{
    width: 100%;
    height: auto;
   background-color: #093e8d;
    color: #ffffff;
    padding: 2% 3%;
}

.head_container{
    
    display: flex;
    justify-content: space-between;
    align-items: center;

}


.head_container ul {
    
    display: flex;
   
}

.head_container li a {
    color: white;
    list-style: none;
    font-size: 18px;
    padding-right: 40px;
}


.head_container a:hover{
    color: white;
}

.laguna_top{
    
	background-color: #ffffff;
	color: #093e8d;
	border-radius: 999px;/*枠線四隅の曲率半径の一括指定*/
	padding: 1% 3%;
    font-size: 20px;

}

.laguna_top:hover{
    
  color: #093e8d !important;

}
.fixed2{

    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    
}

.inner1{
    max-width: 1100px;
    padding: 3%;
}

.inner2{
    max-width: 650px;
    padding: 3%;
}

@media screen and (max-width:500px) {

.head_container{

    font-size: 13px;

}
    
.head_container li a {


    font-size: 13px;
    padding-right: 20px;
    
    
}.laguna_top {

    font-size: 11px;
    padding: 2% 3%;


}
    
}



/*--------------------------------------
フォント
---------------------------------------*/
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*--------------------------------------
図形
---------------------------------------*/

.b_arrow {
  display: block;
    width: 141.4px;
  height: 150px;
  background: #ee8484;
  clip-path: polygon(0 52.9%, 26.3% 52.9%, 26.3% 0, 73.7% 0, 73.7% 52.9%, 100% 52.9%, 50% 100%);


}

@media screen and (max-width:480px) {

    .b_arrow {

   width: 70px;
  height: 80px;
  
}
}


/*--------------------------------------
文字・文字色
---------------------------------------*/
.heading {
  font-size: 200%;
  padding: 3% 0%;
  line-height: 1.2;
}
.heading_at {
  font-size: 200%;
  line-height: 1.2;
  padding: 3% 0% 2% 0%;
}



.txt_or {
  color: #f07231;
}
.txt_bl {
  color: #0868ba;
}
.txt_bl2 {
  color: #0868BA;
}

.txt_gr {
  color: #22c300;
}
.txt_red {
  color: #DE2D2A;
}
.txt_annot {
  font-size: 13px;
  line-height: 1.7;
}
.txt_BL {
  color: #005497;
}


.txt_middle {
  font-size: clamp(13px, calc(12px + 2vw), 30px);
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.txt_middle3 {
  font-size: clamp(12px, calc(10px + 2vw), 20px);
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.txt_middle_2 {
  font-size: clamp(8px, calc(7px + 2vw), 40px);
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.txt_middle4 {
  font-size: clamp(13px, calc(12px + 2vw), 30px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.txt_middle5 {
  font-size: clamp(13px, calc(12px + 2vw), 40px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.txt_medium span {
  color: red;
}
@media screen and (max-width:768px) {
  .heading {
    font-size: 150%;
  }
  .heading_at {
    font-size: 150%;
  }
  .txt_annot {
    font-size: 11px;
    line-height: 1.7;
  }
}

.precautions{
    
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    letter-spacing: 0.5em
}
/*--------------------------------------
top
---------------------------------------*/
.top-wrapper {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 6% 6% 8% 6%;
}
.top-wrapper2 {
  margin: 0 auto;
  width: 100%;
  padding: 6% 6% 8% 6%;
}
.top-wrapper img {
  vertical-align: bottom;
}
@media screen and (max-width:480px) {
  .top-wrapper {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 6%;
  }
}
/*--------------------------------------
スペース
---------------------------------------*/
.space_top2 {
  padding-top: 2%;
}
.space_top3 {
  padding-top: 3%;
}
.space_top5 {
  padding-top: 5%;
}
.space_top7 {
  padding-top: 7%;
}
.space_top10 {
  padding-top: 10%;
}
.space_bottom3 {
  padding-bottom: 3%;
}
.space_bottom5 {
  padding-bottom: 5%;
}
.space_bottom7 {
  padding-bottom: 7%;
}
.space_bottom10 {
  padding-bottom: 10%;
}
/*--------------------------------------
更新履歴
---------------------------------------*/
.news-wrapper {
  width: 100%;
  margin: 0 auto;
  border-top: 0.6em solid #093e8d;
  border-bottom: 0.6em solid #093e8d;
  background-color: #ffb53e;
}
.news-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4%;
}
/* news */
.news-list {
  list-style: none outside;
  margin: 0;
  padding: 0;
  height: 250px;
  overflow-y: auto;
}
.news-list .item a {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child a {
  border-top: 1px solid #CCC;
}
.news-list .item .date {
  margin: 0;
  min-width: 120px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news-list .item .title {
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title {
  color: #fb2a1f;
}
.bg_kadomaru {
  border-radius: 20px;
}
.bg_kadomaru2 {
  border-radius: 30px;
}
.bg_atbl {
  background-color: #0868ba;
}
.bg_kadomaru_or {
  border-radius: 20px;
  border: 1.5px solid #f07231;
  padding: 5%;
  max-width: 800px;
}
.bg_kadomaru_lbl {
  border-radius: 20px;
  padding: 2% 5%;
  max-width: 1000px;
  background-color: #90d3ff;
}
.bg_kadomaru_bl {
  border-radius: 20px;
  padding: 2% 5%;
  max-width: 1000px;
  background-color: #00a0e9;
}
.headline {
  text-align: center;
  padding: 3% 0%;
}
@media screen and (max-width:768px) {
  .bg_kadomaru {
    border-radius: 10px;
  }
.bg_kadomaru2 {
  border-radius: 10px;
}
  .bg_kadomaru_or {
    border-radius: 8px;
  }
  .bg_kadomaru_lbl {
    border-radius: 8px;
  }
}
@media screen and (max-width:480px) {
  .news-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5%;
  }
  .news-list .item a {
    display: block;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #CCC;
    padding: 20px 20px;
  }
}
/*--------------------------------------
カラム
---------------------------------------*/
.col_1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 5vh;
  row-gap: 5vh;
  place-content: center;
  justify-items: center;
  padding: 5%;
}

.col_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5vh;
  row-gap: 5vh;
  place-content: center;
  justify-items: center;
  padding: 5% 0%;
}
.col_box {
  min-width: 100%;
  min-height: auto;
}

.col_box_or {
  background-color: white;
  box-shadow: 5px 5px 0px 0 rgb(244, 104, 31);
  border-radius: 30px;
  border: 0.2em solid #f4681f;
  padding: 3%;
  min-width: 100%;
  min-height: auto;
}
.col_box_bl {
  background-color: white;
  box-shadow: 5px 5px 0px 0 rgb(8, 104, 186);
  border-radius: 30px;
  border: 0.2em solid #0868ba;
  padding: 3%;
  min-width: 100%;
  min-height: auto;
}
.col_box_gr {
  background-color: white;
  box-shadow: 5px 5px 0px 0 rgb(34, 195, 0);
  border-radius: 30px;
  border: 0.2em solid #22c300;
  padding: 3%;
  min-width: 100%;
  min-height: auto;
}

/* 組立工場 */
.box_row {
  display: flex;
  gap: 2vw;
  margin-top: 2vw;
}
.mini_box {
  background: repeating-linear-gradient(135deg, #ffd961, #ffd961 8px, #ffea86 8px, #ffea86 16px);
  border-radius: 15px;
  padding: 2vw 3vw;
  box-shadow: none;
  flex: 1 1 0;
  min-width: 0;
}
.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #0868ba;
  border-radius: 16px;
  overflow: hidden;
  font-size: 1em;
}
.custom-table td {
  border: 1px solid #ccc;
  padding: 12px 0;
  text-align: center;
  font-weight: bold;
}
/* 左側のラベル列 */
.custom-table .label {
  background: #fff;
  color: #333;
  font-weight: normal;
  width: 80px;
}
/* 色つきセル */
.custom-table .blue {
  background: #0868ba;
  color: #fff;
}
.custom-table .red {
  background: #E12327;
  color: #fff;
}
.custom-table .yellow {
  background: #ffe066;
  color: #333;
}
.custom-table .white {
  background: #FFFFFF;
  color: #333;
}
.custom-table .black {
  background: #444;
  color: #fff;
}
.custom-table .silver {
  background: #d1d3d4;
  color: #333;
}
/* 角丸指定（tableにradiusを付けてはみ出し防止） */
.custom-table {
  border-radius: 16px;
  overflow: hidden;
}
.col_box_ticket {
  background: repeating-linear-gradient(135deg, #89ddf9, #89ddf9 10px, #ade2ff 10px, #ade2ff 20px);
  box-shadow: 5px 5px 0px 0 rgb(8, 62, 141);
  border-radius: 20px;
  border: 0.15em solid #083e8d;
  padding: 3%;
  min-width: 100%;
  min-height: auto;
}
.col_btn_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5vh;
  row-gap: 5vh;
  place-content: center;
  justify-items: center;
  padding: 0% 2%;
}
.col_btn_2 span {
  font-size: 120%;
}
.col_btn_2 span:first-of-type {
  font-size: 180%;
  padding-bottom: 2%;
}
.col_btn_2 p {
  line-height: 1.4em;
  letter-spacing: 0.12em;
}
@media screen and (max-width:768px) {
  .col_1 {
    padding: 5% 0%;
  }
  .col_2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 5vh;
    row-gap: 5vh;
    place-content: center;
    justify-items: center;
    padding: 5% 0%;
  }
  .col_box_or {
    min-width: 100%;
    box-shadow: 3px 3px 0px 0 rgb(244, 104, 31);
    border-radius: 10px;
  }
  .col_box_dbl {
    min-width: 100%;
    box-shadow: 3px 3px 0px 0 rgb(8, 62, 141);
    border-radius: 10px;
  }
  .col_box_bl {
    min-width: 100%;
    box-shadow: 3px 3px 0px 0 rgb(8, 104, 186);
    border-radius: 10px;
  }
  .col_box_gr {
    background-color: white;
    box-shadow: 3px 3px 0px 0 rgb(34, 195, 0);
    border-radius: 10px;
  }
  .box_row {
    display: block;
  }
  .mini_box {
    margin: 3%;
  }
  .col_box_gr {
    min-width: 100%;
    box-shadow: 3px 3px 0px 0 rgb(34, 195, 0);
  }
  .col_box_ticket {
    min-width: 100%;
    box-shadow: 3px 3px 0px 0 rgb(8, 62, 141);
    border-radius: 10px;
  }
  .col_btn_2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 5vh;
    row-gap: 5vh;
    place-content: center;
    justify-items: center;
    padding: 5%;
  }
}
@media screen and (max-width:480px) {
  .col_btn_2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 4vh;
    row-gap: 4vh;
    place-content: center;
    justify-items: center;
    padding: 10% 5%;
  }
  .col_btn_2 span:first-of-type {
    font-size: 150%;
  }
  .col_btn_2 span:last-child {
    font-size: 100%;
    padding-bottom: 2%;
  }
}
/*--------------------------------------
アニメーション
---------------------------------------*/
/*zoomin*/
.anim-box.animate__zoomIn.animate__animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* 上スライドイン */
.anim-box.animate__slideInUp.animate__animated {
  animation: slideInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/*--------------------------------------
↓↓↓↓↓↓↓↓スマホ設定↓↓↓↓↓↓↓↓
---------------------------------------*/
/*PCスマホ表示なし*/
.pc {
  display: block;
}
.pc_in {
  display: inline-block;
}
.sp {
  display: none;
}
@media screen and (max-width:768px) {
  .pc {
    display: none;
  }
  .pc_in {
    display: none;
  }
  .sp {
    display: block;
  }
}
/*--------------------------------------
スマホの時だけ改行
---------------------------------------*/
.sma {
  display: none;
}
@media screen and (max-width:768px) {
  .sma {
    display: block;
  }
}
/*--------------------------------------
固定スライダー設定
---------------------------------------*/
.autoplay {
  margin: 0 10%;
  width: 80%;
}
/*--------------------------------------
youtbeCSS
---------------------------------------*/
.movie {
  width: 100%; /* 横幅変更 */
  padding: 0;
  box-sizing: border-box;
}
.movie-wrap {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*--------------------------------------
ボタン
---------------------------------------*/
.btn {
  position: relative;
  top: 0;
}
.btn_Light_blue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 19vh;
  text-decoration: none;
  background: #389DF0;
  text-align: center;
  border: 10px solid #389DF0;
  color: #FFFFFF;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  box-shadow: 2px 2px 10px 0px #FFFFFF inset;
  transition: all 0.5s ease;
}
.btn_green {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 85%;
  height: 19vh;
  text-decoration: none;
  background: #22c300;
  text-align: center;
  border: 10px solid #22c300;
  color: #FFFFFF;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  box-shadow: 2px 2px 10px 0px #FFFFFF inset;
  padding: 15%;
}
.btn_Light_blue:hover {
  background: #ffb53e;
  color: #FFFFFF;
  margin-left: 0px;
  margin-top: 0px;
  border: 9px solid #FFFFFF;
  box-shadow: none;
}
.btn-title {
  color: #fff;
  font-size: calc(17px + 8 * (100vw - 320px) / 880);
  font-weight: bold;
  letter-spacing: 0.15em;
  line-height: 1;
  margin-bottom: 20px;
}
.btn-sub {
  color: #fff;
  letter-spacing: 0.15em;
  opacity: 0.9;
}
@media screen and (max-width:480px) {
  .btn_Light_blue {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20vh;
    text-decoration: none;
    background: #389DF0;
    text-align: center;
    border: 9px solid #389DF0;
    color: #FFFFFF;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    box-shadow: 2px 2px 6px 0px #FFFFFF inset;
    transition: all 0.5s ease;
  }
}
.btn_blue {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(14px, calc(12px + 2vw), 23px);
  letter-spacing: 0.15em;
  border-radius: 9999px;
  width: 70vw;
  height: 5vh;
  max-width: 600px;
  background-color: #005497;
  margin: 0 auto;
}

.btn_pink {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(14px, calc(12px + 2vw), 23px);
  letter-spacing: 0.15em;
  border-radius: 9999px;
  width: 70vw;
  height: 5vh;
  max-width: 500px;
  background-color: #eb6d80;
  margin: 0 auto;
}

.btn_pink2 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size:1em;
    padding: 3%;
  letter-spacing: 0.15em;
  border-radius: 9999px;
  width: 100%;
  max-width: 500px;
  background-color: #eb6d80;
  margin: 0 auto;
}

.btn_blue2 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(14px, calc(12px + 2vw), 23px);
  letter-spacing: 0.15em;
  border-radius: 9999px;
  width: 70vw;
  height: 5vh;
  max-width: 800px;
  background-color: #0868BA;
  margin: 0 auto;
}

.btn_red {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(14px, calc(12px + 2vw), 23px);
  letter-spacing: 0.15em;
  border-radius: 9999px;
  width: 70vw;
  height: 5vh;
  max-width: 800px;
  background-color: #DE2D2A;
  margin: 0 auto;
}
.btn_orange {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: clamp(14px, calc(12px + 2vw), 23px);
  letter-spacing: 0.15em;
  border-radius: 9999px;
  width: 70vw;
  height: 5vh;
  max-width: 800px;
  background-color: #f07231;
  margin: 0 auto;
}
.btn_Y_shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  text-decoration: none;
  font-size: clamp(7px, calc(7px + 2vw), 25px);
  letter-spacing: 0.1em;
  border-radius: 9999px;
  border-bottom: 5px solid #E9A771;
  width: 70vw;
  height: 10vh;
  max-width: 800px;
  background-color: #FFE236;
  transition: all 0.5s ease;
  margin: 0 auto;
    color: black;

}
.btn_Y_shadow:hover {
  border-bottom-width: 0;
  transform: translateY(5px);
  background: #004ebe;
  color: white;
}
.seien {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: clamp(20px, calc(15px + 2vw), 40px);
  border-radius: 50px;
  width: 5vh;
  height: 5vh;
  background-color: #f07231;
  margin: 0 auto;
}
@media screen and (max-width:480px) {
  .btn_blue .btn_orange{
    height: 3vh;
  }

    
}