/* CSS Document */


 /*--------------------------------------
背景設定
---------------------------------------*/


.bgYS {
	background-image: url("../img/exh/p_tomica_exh_11.jpg");
    background-repeat:repeat;
    background-position:top;
    background-size: auto;
    background-attachment: fixed;
	width:100%;
	height: auto;

}

.bgBS {
	background-image: url("../img/at/p_tomica_at_5.jpg");
    background-repeat:repeat;
    background-position:top;
    background-size: auto;
    background-attachment: fixed;
	width:100%;
	height: auto;

}

.bgGS {
	background-image: url("../img/goods/p_tomica_gd_1.jpg");
    background-repeat:repeat;
    background-position:top;
    background-size: auto;
    background-attachment: fixed;
	width:100%;
	height: auto;

}


.bg_top{
    background: url("../img/top/p_tomica_top_14.jpg");
     background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;

        
}

.bg_notice{
    background-image: url("../img/top/p_tomica_top_6.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 100%;
    height: auto;
    

}



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

.bgYS {
	background-image: url("../img/exh/p_tomica_exh_12.jpg");

}
    
.bgBS {
	background-image: url("../img/at/p_tomica_at_6.jpg");

}
    
.bgGS {
	background-image: url("../img/goods/p_tomica_gd_2.jpg");


}
    
}


.bgBL{
    background-color: #093e8d;
}


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

}    
    
.bg_notice{
    background-image: url("../img/top/p_tomica_top_17.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 100%;
    height: auto;
    

}
    
.bg_ex{
    
    background: url("../img/exh/p_tomica_exh_19.webp");
     background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    

    
}

    
}


 /*--------------------------------------
レイアウト
---------------------------------------*/

.box_center{
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
}

/*--------------------------------------
文字・文字色
---------------------------------------*/


.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_gr{
    
    color: #22c300;
}
.txt_annot {
    
	font-size: 13px;
	line-height:1.5;
}

.txt_BL{
    color: #005497;
}

.txt_middle{
    

font-size: clamp(13px, calc(12px + 2vw), 30px);
    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_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.5;
}

}




/*--------------------------------------
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_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_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_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_or{

    background-color: white;
    box-shadow:  5px 5px 0px 0 rgb(244, 104, 31);
    border-radius: 3%;
    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: 3%;
    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: 3%;
    border: 0.2em solid #22c300;
    padding: 3%;
	min-width: 100%;
  	min-height: auto;
}

.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);
	
}
    
.col_box_dbl{
    
     min-width: 100%;
    box-shadow:  3px 3px 0px 0 rgb(8, 62, 141);
	
}
.col_box_bl{

	min-width: 100%;
    box-shadow:  3px 3px 0px 0 rgb(8, 104, 186);


}
    
    
.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_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;
  text-decoration: none;
font-size: clamp(10px, calc(9px + 2vw), 23px);
    letter-spacing: 0.15em;
  border-radius: 9999px;
border-bottom: 5px solid #f4a466;
    width: 50vw;
  height: 7vh;
    max-width: 400px;
  background-color: #ffd155;
    transition: all 0.5s ease;

 margin: 0 auto;
    
}


.btn_Y_shadow:hover{
    
     border-bottom-width: 0;
  transform: translateY(5px);
    background:#389DF0;
    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;
}   
    

}