@charset "UTF-8";

/******************************************************
**********************************************************

kotei

header

PC

********************************************************
********************************************************/

#header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9 !important;
  width: 100vw;
  height:70px;
  padding:0;
  background-color:#000096;

  display: flex;
  justify-content: center;
  align-items: center;
}

.head-in{
  padding:0 24px;
  max-width: 1200px;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headlogo{
    margin: 0;
    width:215px;
    height:57px;
  }

.headline{
    width: 195px;
    height: 45px;
  }

/*****************************************************
*****************************************************


kotei

header

SP


*********************************************************
********************************************************/

@media(max-width:551px){
  #header{
    width: 100vw;
    padding:0;
    height: calc(70vw / 5);/**/
  }

  .head-in{
    width: 100%;
    max-width: initial;
    padding: 0 1vw;
    height: 100%;
  }

  .headlogo{
    width: calc(188vw / 5);
    height: calc(50vw / 5);
  }
  
  .headline{
    width: calc(195vw / 5);
    height: calc(45vw / 5);
  }
    
}


/*****************************************************
*****************************************************


kotei

footer CSS

PC


*****************************************************
*****************************************************/

footer{
  margin: -410px 0 0 0;
  width: 100%;
  height: 410px;
  padding: 114px 0 32px 0;
  display: flex;
  justify-content:center;
  align-items: center;

  background-image: url("../image/footer_bg.png");
  background-position: center center;
  background-repeat: repeat-x;
  background-size: 27px 100%;
}

.footer_flex{
  width: 100%;
  height: 100%;
  max-width: 1140px;
  padding: 0 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.footer_menu{
  margin: 0;
  width:780px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer_item{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 18px;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

/*
.footerin{
  width: 100%;
  max-width: 1140px;
  padding:24px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}*/

.footer_logo{
  margin:0 0 0 0;
  width: 310px;
  height: 82px;
}

.footattention{
  margin:0 0 0 0;
  width:calc(730vw / 12);/*84%*/
  max-width:730px; /*1008px;960px*/
  /*border: 1px #fff solid;*/
}

.footattentiont_txt{
  margin: 0;
  color:#fff;
  font-size: 0.85rem;
  line-height: 1.45;
  letter-spacing: 1px;
  text-align: center;
}

.footer_copyright{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  color:#fff;
  font-size: 0.7rem;
  background-color: #29abe2;
  letter-spacing: 1px;
}


/*****************************************************
*****************************************************


kotei

footer CSS

SP


*****************************************************
*****************************************************/


@media(max-width:550px){
footer{
  margin:calc(-124vw / 5) 0 0 0;
  width: 100vw;
  height: calc(935vw / 5);
  padding: calc(136vw / 5) 0 calc(24vw / 5) 0;

  background-image: url("../image/footer_bg_sp.png");
  background-position: center center;
  background-repeat: repeat-x;
  background-size: calc(28vw / 5) 100%;
}
  
.footer_flex{
  width: 100%;
  height: 100%;
  max-width: initial;
  padding: 0;
}
  
  .footer_menu{
    margin: 0;
    width:100%;
    flex-wrap: wrap;
  }

  .footer_item{
    margin:calc(15vw / 5) calc(15vw / 5);
    width: 100%;

    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
  }
  
  .footattention{
    width:100%;/*84%*/
    padding: 0;
    max-width:initial;
    margin:calc(24vw / 5) 0 0 0;
  }
  
  .footattentiont_txt{
    margin: 0;
    color:#fff;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
  }
  
  .footer_logo{
    margin:calc(25vw / 5) 0 calc(15vw / 5) 0;
    width: calc(380vw / 5);
    height:auto;
  }
  
  .footer_copyright{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 6px 0;
    text-align: center;
    font-size: 0.7rem;
  }

}

/*****************************************************
*****************************************************


kotei

section1 CSS

PC CSS


*****************************************************
*****************************************************/

.sec1-1{
  position: relative;
  margin: min(96px,8vw) auto 0 auto;
  padding: 2% 0 ;
  width: calc(1017vw / 12);
  max-width: 1017px;
  height: calc(707vw / 12);
  max-height: 707px;
/*
  display: flex;
  justify-content: center;
  align-items: flex-start;*/
}

.sec1-1_img1{
  margin: 0;
  width:calc(835vw / 12);
  max-width: 835px;
  height: calc(538vw / 12);
  max-height: 538px;
}


.sec1-1_dragon{
  position: absolute;
  width:calc(430vw / 12) ;
  max-width:430px;
  height:calc(373vw / 12) ;
  max-height:373px;

  top:0;
  right:0; 
  left:0;
  margin: 0 auto;
}

.sec1-1_shiro{
  position: absolute;
  width:calc(584vw / 12) ;
  max-width:584px;
  height:calc(347vw / 12) ;
  max-height:347px;

  top:9%;
  right:0; 
  left:0;
  margin: 0 auto;
}

.sec1-1_uma3{
  position: absolute;
  width:calc(272vw / 12) ;
  max-width:272px;
  height:calc(357vw / 12) ;
  max-height:357px;

  top:0.5%;
  left: 8%;
}


.sec1-1_uma4{
  position: absolute;
  width:calc(273vw / 12) ;
  max-width:273px;
  height:calc(297vw / 12) ;
  max-height:297px;

  top:6%;
  right: 8%;
}

.sec1-1_uma1{
  position: absolute;
  width:calc(299vw / 12) ;
  max-width:299px;
  height:calc(275vw / 12) ;
  max-height:275px;

  bottom:0;
  left: -1%;
}

.sec1-1_uma2{
  position: absolute;
  width:calc(269vw / 12) ;
  max-width:269px;
  height:calc(261vw / 12) ;
  max-height:261px;

  bottom:0;
  right: 0;
}

.sec1-1_mlogo{
  position: absolute;
  width:calc(800vw / 12) ;
  max-width:800px;
  height:calc(304.5vw / 12) ;
  max-height:304.5px;

  top:33.5%;/*38%*/
  right:0;
  left: 0;
  margin:0 auto;
}

.sec1-1_tlogo{
  position: absolute;
  margin: 0;
  width:calc(190vw / 12) ;
  max-width:190px;
  height:calc(446vw / 12) ;
  max-height:446px;

  top:6%;
  right: -5%;
}

/********************************************

anime

*********************************************/


 .anime .pic{
   opacity: 0;
   animation-name: none;
 }

.action .pic{
  -webkit-animation-name: opacity-anime;
   animation-name: opacity-anime;
   animation-duration: 0.5s;
   animation-fill-mode: both;
   animation-timing-function:linear;
}

.pic-1{animation-delay: .1s;}
.pic-2 {animation-delay: .2s;}
.pic-3 {animation-delay: .3s;}
.pic-4 {animation-delay: .4s;}
.pic-5 {animation-delay: .5s;}
.pic-6 {animation-delay: .6s;}
.pic-7 {animation-delay: .7s;}
.pic-8 {animation-delay: .8s;}

@keyframes opacity-anime {
  0% {
    scale: .8;
    opacity: 0; }
  50% {
    scale: 1.1;
    opacity: 1; }
  100% {
    opacity: 1;
    scale: 1; } }

 .anime .zoomout{
   opacity: 0;
   animation-name: none;
 }

.action .zoomout{
  -webkit-animation-name: zoomout;
   animation-name: zoomout;
   animation-duration: 0.5s;
   animation-delay: .1s;
   animation-fill-mode: both;
   animation-timing-function:linear;
}

@keyframes zoomout {
  0% {
    scale: 1.4;
    opacity: 0; }
  50% {
    scale: 0.9;
    opacity: 1; }
  100% {
    opacity: 1;
    scale: 1; } }

 .anime .zoomIn{
   opacity: 0;
   animation-name: none;
 }

.action .zoomIn{
  -webkit-animation-name: zoomIn;
   animation-name: zoomIn;
   animation-duration: 0.5s;
   animation-delay: .1s;
   animation-fill-mode: both;
   animation-timing-function:linear;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0; }
  100% {
    opacity: 1;
    transform: scale(1); } }
  
 .anime .slideIn{
   opacity: 0;
   animation-name: none;
 }

.action .slideIn{
  -webkit-animation-name: slideIn;
   animation-name: slideIn;
   animation-duration: 0.5s;
   animation-delay: .1s;
   animation-fill-mode: both;
   animation-timing-function:linear;
}

@keyframes slideIn{
  0% {
    transform: translateY(50px);
    opacity: 0; }
  100% {
    transform: translateY(0); }
  40%,100% {
    opacity: 1; } }


/********************************************

kotei

sec1-1

SP css

***********************************************/
@media(max-width:550px){
  
.sec1-1{
  position: relative;
  margin: calc(109vw / 5) auto 0 auto;
  padding:0;
  width: calc(500vw / 5);
  max-width: initial;
  height: calc(544vw / 5);/*564vw*/
  max-height: initial;
/*
  display: flex;
  justify-content: center;
  align-items: flex-start;*/
}

.sec1-1_dragon{
  position: absolute;
  width:calc(294vw / 5) ;
  max-width:initial;
  height:calc(256vw / 5) ;
  max-height:initial;

  top:0;
  right:0; 
  left:0;
  margin: 0 auto;
}

.sec1-1_shiro{
  position: absolute;
  width:calc(400vw / 5) ;
  max-width:initial;
  height:calc(238vw / 5) ;
  max-height:initial;

  top:10%;
  right:0; 
  left:0;
  margin: 0 auto;
}

.sec1-1_uma3{
  position: absolute;
  width:calc(161vw / 5) ;
  max-width:initial;
  height:calc(212vw / 5) ;
  max-height:initial;

  top:-5%;
  left: 7%;
}

.sec1-1_uma4{
  position: absolute;
  width:calc(162vw / 5) ;
  max-width:initial;
  height:calc(176vw / 5) ;
  max-height:initial;

  top:-1%;
  right: 10%;
}

.sec1-1_uma1{
  position: absolute;
  width:calc(177vw / 5) ;
  width:calc(188vw / 5) ;
  max-width:initial;
  height:calc(163vw / 5) ;
  height:calc(171vw / 5) ;
  max-height:initial;

  bottom:2%;
  left: 0;
}

.sec1-1_uma2{
  position: absolute;
  width:calc(159vw / 5) ;
  width:calc(167vw / 5) ;
  max-width:initial;
  height:calc(154vw / 5) ;
  height:calc(161vw / 5) ;
  max-height:initial;

  bottom:3%;
  right: 0;
}

.sec1-1_mlogo{
  width:calc(470vw / 5) ;
  max-width:initial;
  height:calc(187vw / 5) ;
  max-height:initial;

  top:33%;/*38%*/
  right:0;
  left: 0;
  margin:0 auto;
}

.sec1-1_tlogo{
  width:calc(109vw / 5) ;
  max-width:initial;
  height:calc(239vw / 5) ;
  max-height:initial;

  top:-5%;
  right: 2%;
}

  
}


/**********************************

kotei

sec1-2

PC css

*************************************/


.sec1-2{
  margin: 0 auto;
  position: relative;
  padding:1% 0;
  width: 100vw;
  max-width: 1200px;
  aspect-ratio: 1200 / 750;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec1-2_flmbg{
  position: relative;
  margin: 0;
  /*padding:124px 0 76px 0;*/
  padding: min(124px,10.3vw) 0  min(76px,6.3vw) 0;
  width: calc(1034vw / 12);
  max-width: 1034px;
  aspect-ratio: 1034 / 756;

  background-image: url("../image/sec1_1000flmback.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.sec1-2_1000{
  margin: 0;
  padding:0;
  width: calc(752vw / 12);
  max-width: 752px;
  height:calc(343vw / 12) ;
  max-height:343px;
}

.sec1-2_line{
  margin: 0;
  padding:0;
  width: calc(420vw / 12);
  max-width: 420px;
  height:calc(85vw / 12) ;
  max-height:85px;
}

.sec1-2_attention{
  margin: 0 0 0 0;
  text-align: center;
  line-height: 1.4;
  color: #fff;
  font-weight: 0.9rem;
  letter-spacing: 1px;
}

.sec1-2_uma1{
  position:absolute;
  bottom: 1%;
  left: 8%;
  width: calc(253vw / 12);
  max-width: 253px;
  height:calc(259vw / 12) ;
  max-height:259px;
}

.sec1-2_uma2{
  position:absolute;
  bottom: 1%;
  right: 8%;
  width: calc(228vw / 12);
  max-width: 228px;
  height:calc(286vw / 12) ;
  max-height:286px;
}

/********************************************

kotei

sec1-2

SP css

***********************************************/
@media(max-width:550px){
  
.sec1-2{
  padding:2.5vw 0 5vw 0;
  width: 100vw;
  max-width: initial;
  aspect-ratio:500 / 555;/* 500 / 545;*/
}

.sec1-2_flmbg{
  position: relative;
  margin: 0;
  /*padding:124px 0 76px 0;*/
  padding:calc(90vw / 5) 0 calc(88vw / 5) 0;
  width: calc(500vw / 5);
  max-width: initial;
  aspect-ratio: 500 / 545;

  background-image: url("../image/sec1_1000flmback_sp.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec1-2_1000{
  margin: 0;
  padding:0;
  width: calc(384vw / 5);
  max-width: initial;
  height:calc(178vw / 5) ;
  max-height:initial;
}

.sec1-2_line{
  margin: 0;
  padding:0;
  width: calc(320vw / 5);
  max-width: initial;
  height:calc(83vw / 5) ;
  max-height:initial;
}

.sec1-2_attention{
  margin: 0 0 0 0;
  text-align: center;
  line-height: 1.4;
  color: #fff;
  font-weight: 0.8rem;
  letter-spacing: 0;
}

.sec1-2_uma1{
  bottom: 6%;
  left: 0;
  width: calc(142vw / 5);
  max-width: initial;
  height:calc(144vw / 5) ;
  max-height:initial;
}

.sec1-2_uma2{
  bottom: 6%;
  right: 0;
  width: calc(127vw / 5);
  max-width: initial;
  height:calc(160vw / 5) ;
  max-height:initial;
}


}

/**************************************

anime 

spin 

***************************************/
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin_back {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/********************************************

kotei

border GOLD

PC css

***********************************************/

.section-borderup{
width: 100%;
height: calc(13vw / 12);
max-height: 13px;

background-image: url("../image/secborder_up.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}

.section-borderdw{
width: 100%;
height: calc(13vw / 12);
max-height: 13px;

background-image: url("../image/secborder_dw.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}

/** border GOLD SP**/
@media(max-width:550px){
.section-borderup{
width: 100vw;
height: calc(12vw / 5);
max-height: initial;

background-image: url("../image/secborder_up_sp.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}

.section-borderdw{
width: 100vw;
height: calc(12vw / 5);
max-height: initial;

background-image: url("../image/secborder_dw_sp.webp");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}

}


/********************************************

kotei

sec2

PC css

***********************************************/

.sec2{
  margin: -1px 0 0 0;
  width:100%;
  height: calc(580vw / 12);
  max-height: 580px;
  /*aspect-ratio: 1200 / 580;*/
  position: relative;
  z-index: -2;
  background-color:#fab626 ;
  overflow: hidden;
}

.sec2bg {
    position: relative;/*absolute*/
    width: 200vw;
    height: 200vw;
    top:min(-75vw , -75vh);/*calc(50% - 100vw);*/
    left: calc(50% - 100vw);

    background-image: 
    repeating-conic-gradient(transparent 0, transparent 8deg, #f99c2a 8deg, #f99c2a 15deg),
    repeating-conic-gradient(transparent 0, transparent 42deg, #f8652e 42deg, #f8652e 48deg),
    repeating-conic-gradient(transparent 0, transparent 26deg, #f8652e 26deg, #f8652e 28deg);

    /*
    background-image: 
    repeating-conic-gradient(transparent 0, transparent 20deg, #f99c2a 13deg, #f99c2a 23deg),
    repeating-conic-gradient(transparent 0, transparent 40deg, #ffab3c 5deg, #ffab3c 44deg),
    repeating-conic-gradient(transparent 0, transparent 10deg, #ffab3c 10deg, #ffab3c 13deg),
    repeating-conic-gradient(transparent 0, transparent 15deg, #f8652e 16deg, #f8652e 26deg),
    repeating-conic-gradient(transparent 0, transparent 25deg, #E76E3F 8deg, #E76E3F 30deg),
    repeating-conic-gradient(transparent 0, transparent 35deg, #E76E3F 10deg, #E76E3F 48deg);*/

    -webkit-animation: backgroundAnimation 36s infinite linear;
    animation: backgroundAnimation 36s infinite linear;
}

.sec2bg:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#fab626  0%, #fab626  12%, transparent 22%, transparent);
}


@keyframes backgroundAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sec2_flm{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: min(24px,2vw) 0;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1200 / 580;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.sec2_ttl1{
  width:calc(800vw / 12) ;
  max-width: 800px;
  height: auto;
}

.sec2-flx{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sec2_img1{
  margin: 0 20px;
  width:calc(436vw / 12) ;
  max-width: 436px;
  height: auto;
}

.sec2_img2{
  margin: 0 20px;
  width:calc(436vw / 12) ;
  max-width: 436px;
  height: auto;
}

.sec2_ttl2{
  width:calc(663vw / 12) ;
  max-width: 663px;
  height: auto;
}

/********************************************

kotei

sec2

SP css

***********************************************/


@media(min-width:1999px){
  .sec2bg {
    top:min(-85vw , -75vh);/*calc(50% - 100vw);*/
  }
}


@media(max-width:550px){

.sec2{
  margin: -1px 0 0 0;
  width:100vw;
  max-height: initial;
  height: 100vw;
}

.sec2bg {
    position: relative;/*absolute*/
    width: 200vw;
    height: 200vw;
    top: -45vw;
    left: calc(50% -100vw);
    

    background-image: 
    repeating-conic-gradient(transparent 0, transparent 8deg, #f99c2a 8deg, #f99c2a 15deg),
    repeating-conic-gradient(transparent 0, transparent 42deg, #f8652e 42deg, #f8652e 48deg),
    repeating-conic-gradient(transparent 0, transparent 26deg, #f8652e 26deg, #f8652e 28deg);

    /*
    background-image: 
    repeating-conic-gradient(transparent 0, transparent 20deg, #f99c2a 13deg, #f99c2a 23deg),
    repeating-conic-gradient(transparent 0, transparent 40deg, #ffab3c 5deg, #ffab3c 44deg),
    repeating-conic-gradient(transparent 0, transparent 10deg, #ffab3c 10deg, #ffab3c 13deg),
    repeating-conic-gradient(transparent 0, transparent 15deg, #f8652e 16deg, #f8652e 26deg),
    repeating-conic-gradient(transparent 0, transparent 25deg, #E76E3F 8deg, #E76E3F 30deg),
    repeating-conic-gradient(transparent 0, transparent 35deg, #E76E3F 10deg, #E76E3F 48deg);*/

    -webkit-animation: backgroundAnimation 36s infinite linear;
    animation: backgroundAnimation 36s infinite linear;
}



.sec2_flm{
  padding: 9vw 0;
  width: 100%;
  max-width: initial;
  aspect-ratio: 500 / 500;
}

.sec2_ttl1{
  width:calc(450vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec2_img1{
  margin: 0 1px;
  width:calc(228vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec2_img2{
  margin: 0 1px;
  width:calc(228vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec2_ttl2{
  width:calc(423vw / 5) ;
  max-width: initial;
  height: auto;
}


}

/********************************************

kotei

sec3

PC css

***********************************************/

.sec3{
  position: relative;
  margin: -1px 0 0 0;
  padding: min(36px,3vw) 0;
  width:100%;
  height: auto;

  background-color: #EBD256;
  background-image: url("../image/sec3_bg.svg");
  background-position: center center;
  background-repeat: repeat;
  background-size: 27.5px 27.5px;
}

.sec3::before{
  position: absolute;
  content: "";
  width: 100%;
  height:81px;

  bottom: -81px;
  left: 0;
  background-image: url("../image/sec3_bgbefore.png");
  background-position: center center;
  background-repeat: repeat-x;
  background-size: 27px 81px;
}

.sec3_flm{
  position: relative;
  margin: 0 auto;
  padding: min(36px,4.5vw) 0 min(48px ,4vw) 0;
  width: calc(918vw / 12);
  max-width: 918px;
  height:  calc(1109vw / 12);
  max-height: 1109px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-image: url("../image/sec3_flmbg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec3_ttl1{
  width: calc(670vw / 12);
  max-width: 670px;
  aspect-ratio: 670 / 130;
}

.sec3_ttl2{
  width: calc(808vw / 12);
  max-width: 808px;
  aspect-ratio: 808 / 134;
}

.sec3_ttl3{
  margin: max(-24px , -2vw);
  width: calc(758vw / 12);
  max-width: 758px;
  aspect-ratio: 758 / 104;
}

.sec3_ttl4{
  width: calc(675vw / 12);
  max-width: 675px;
  aspect-ratio: 675 / 134;
}

.sec3_ttl5{
  margin: min(24px,2vw) 0 max(-24px , -2vw) 0;
  width: calc(288vw / 12);
  max-width: 288px;
  aspect-ratio: 288 / 53;
}

.sec3_ttl6{
  width: calc(726vw / 12);
  max-width: 726px;
  aspect-ratio: 726 / 283;
}

.sec3_ttl7{
  margin: max(-12px , -1vw) 0;
  width: calc(579vw / 12);
  max-width: 579px;
  aspect-ratio: 579 / 149;
}

.sec3_ttl8{
  width: calc(624vw / 12);
  max-width: 624px;
  aspect-ratio: 624 / 66;
}

.sec3_uma1{
  position: absolute;
  top: -1%;
  left:-17%;

  width: calc(270vw / 12);
  max-width: 270px;
  aspect-ratio: 270 / 279;
}

.sec3_uma2{
  position: absolute;
  bottom: -2%;
  right:-17%;

  width: calc(300vw / 12);
  max-width: 300px;
  aspect-ratio: 300 / 300;
}
/********************************************

kotei

sec3

SP css

***********************************************/
@media(max-width:550px){

.sec3{
  position: relative;
  margin: -1px 0 0 0;
  padding: calc(30vw / 5) 0 calc(50vw / 5) 0;
  width:100vw;
  height: auto;

  background-color: #EBD256;
  background-image: url("../image/sec3_bg.svg");
  background-position: center center;
  background-repeat: repeat;
  background-size: calc(27.5vw / 5) calc(27.5vw / 5);
}

.sec3::before{
  position: absolute;
  content: "";
  width: 100%;
  height:calc(86vw / 5);

  bottom: calc(-84vw / 5);
  left: 0;
  background-image: url("../image/sec3_bgbefore_sp.png");
  background-position: center center;
  background-repeat: repeat-x;
  background-size: calc(27.5vw / 5) calc(86vw / 5);
}

.sec3_flm{
  position: relative;
  margin: 0 auto;
  padding: calc(42vw / 5) 0 calc(35vw / 5) 0;
  width: calc(922vw / 10);
  max-width: initial;
  height:  calc(1974vw / 10);
  max-height: initial;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background-image: url("../image/sec3_flmbg_sp.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec3_ttl1{
  width: calc(821vw / 10);
  max-width: initial;
  aspect-ratio: 821 / 163;
}

.sec3_ttl2{
  margin: 1vw 0 1vw 0;
  width: calc(744vw / 10);
  max-width: initial;
  aspect-ratio: 744 / 229;
}

.sec3_ttl3{
  margin:0 0 2vw 0; /*max(-24px , -2vw);*/
  width: calc(697vw / 10);
  max-width: initial;
  aspect-ratio: 697 / 117;
}

.sec3_ttl4{
  width: calc(837vw / 10);
  max-width: initial;
  aspect-ratio: 837 / 173;
}

.sec3_ttl5{
  margin:3vw 0 -4vw 0;/* min(24px,2vw) 0 max(-24px , -2vw) 0;*/
  width: calc(531vw / 10);
  max-width: initial;
  aspect-ratio: 531 / 97;
}

.sec3_ttl6{
  width: calc(971vw / 10);
  max-width: initial;
  aspect-ratio: 971 / 453;
}

.sec3_ttl7{
  margin:3vw 0 0 0;/* max(-12px , -1vw) 0;*/
  width: calc(817vw / 10);
  max-width: initial;
  aspect-ratio: 817 / 153;
}

.sec3_ttl8{
  margin: 1vw -5vw 0 0;
  width: calc(834vw / 10);
  max-width: initial;
  aspect-ratio: 834 / 268;
}

.sec3_uma1{
  position: absolute;
  top: -6%;
  left:-3.5%;

  width: calc(277vw / 10);
  max-width: initial;
  aspect-ratio: 277 / 286;
}

.sec3_uma2{
  position: absolute;
  bottom: 3%;
  right:1%;

  width: calc(304vw / 10);
  max-width: initial;
  aspect-ratio: 300 / 300;
}


}


/*****************************************************
*****************************************************


kotei

section4 CSS

PC


*****************************************************
*****************************************************/

.sec4{
  margin: 0 auto;
  padding:min(60px , 5vw) 0 1% 0;/*81px + 100px?*/
  width: 100%;
  max-width: 1200px;
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

}

.sec4_flm{
  
  margin: 0;
  padding: min(72px,6vw) 0 min(36px,3vw) 0;
  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec4_ttl{
  position: relative;
  margin: 0;
  width: calc(720vw / 12);
  max-width: 720px;
  height: calc(71vw / 12);
  max-height: 71px;
/*
  background-image: url("../image/sec4_ttl.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;*/
}

.sec4_uma1{
  position: absolute;
  top:max(-72px , -6vw);
  left: max(-60px , -5vw);
  width: calc(170vw / 12);
  max-width: 170px;
  height:auto;
}

.sec4_uma2{
  position: absolute;
  top:max(-72px , -6vw);
  right: max(-60px , -5vw);
  width: calc(183vw / 12);
  max-width: 183px;
  height:auto;
}

.sec4_flx{
  margin:min(18px , 1.5vw) 0 0 0;
  width: 100vw;
  max-width: 1200px;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.sec4_item{
  margin: 12px 12px;
  width: calc(312vw / 12);
  max-width: 312px;
  height: auto;
}


/*****************************************************
*****************************************************


kotei

section4 CSS

SP


*****************************************************
*****************************************************/

@media(max-width:550px){

.sec4{
  margin: 0 auto;
  padding:calc(100vw / 5) 0 calc(25vw / 5) 0;
  width: 100vw;
  max-width: initial;
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sec4_flm{
  margin: 0;
  padding: 2vw 0 2vw 0;
  width: 100%;
  height: auto;
}

.sec4_ttl{
  position: relative;
  margin: 0;
  width: calc(901vw / 10);
  max-width: initial;
  height: calc(161vw / 10);
  max-height: initial;

  /*
  background-image: url("../image/sec4_ttl_sp.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;*/
}

.sec4_uma1{
  position: absolute;
  top:calc(830vw / 10);
  left:-5vw;
  width: calc(301vw / 10);
  max-width: initial;
  height:auto;
}

.sec4_uma2{
  position: absolute;
  top:calc(830vw / 10);
  right:-5vw;
  width: calc(292vw / 10);
  max-width: initial;
  height:auto;
}

.sec4_flx{
  margin:2vw 0 0 0;
  width: 100vw;
  max-width: initial;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.sec4_item{
  margin:calc(6vw / 5) calc(6vw / 5);
  width: calc(441vw / 10);
  max-width: initial;
  height: auto;
}

}

/********************************************

kotei

sec5

PC css

***********************************************/

.sec5{
  position: relative;
  z-index: -2;
  margin: -1px 0 0 0;
  width:100%;
  height: auto;
  background-color: #7ff0ff;
  overflow: hidden;
}

.sec5::before{
  position: absolute;
  content: "";
  z-index: -2;
  width: 100%;
  height: 100%;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  background-image:repeating-conic-gradient(transparent 0, transparent 13deg, #6ed3ff 13deg, #6ed3ff 26deg);
}

.sec5_flm{
  margin:0 auto;
  padding:0 0 min(60vw , 5vw) 0;
  width: 100%;
  max-width: 1200px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.sec5_logo{
  position: relative;
  margin: 0;
  max-width: 470px;
  width: calc(470vw / 12);
  height: calc(395vw / 12);
  max-height: 395px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec5_logo::before{
position: absolute;
z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top:0;
  bottom: 0;
  right: 0;
  left:0;
  margin: auto;

  background-image: url("../image/sec5_logobg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: min(397px,33vw) min(397px,33vw);

  -webkit-animation: backgroundAnimation 36s infinite linear;
  animation: backgroundAnimation 36s infinite linear;
}


.sec5_ttl{
  margin: 0;
  max-width: 900px;
  width: calc(900vw / 12);
  height: auto;
}

.sec5_redflm{
  position: relative;
  z-index:-2;
  margin:min(12px , 1vw) 0 0 0;
  padding: 0;

  width: calc(900vw / 12);
  max-width: 900px;
  height: calc(1310vw / 12);
  max-height: 1310px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  border: 3px solid #000;
  border-radius: 12px;

  background-color: #8E241C;
  background-image: repeating-linear-gradient(-45deg, #da3832, #da3832 2px, transparent 2px, transparent 8px);
}

.sec5_img1{
  position: relative;
  z-index:-2;
  margin: max(-12vw , -1vw) 0 0 0;
  width:calc(798vw / 12) ;
  max-width:798px;
  height: auto;
}

.sec5_img{
  position: relative;
  z-index:-2;
  margin: max(-36vw , -3vw) 0 0 0;
  width:calc(798vw / 12) ;
  max-width:798px;
  height: auto;
}

.sec5_img4{
  position: relative;
  z-index:-2;
  margin: max(-36vw , -3vw) 0 max(-12vw , 1vw) 0;
  width:calc(798vw / 12) ;
  max-width:798px;
  height: auto;
}

.sec5_uma1{
  position: absolute;
  top:18%;
  right: -14%;
  width:calc(356vw / 12) ;
  max-width:356px;
  height:calc(288vw / 12);
  max-height: 288px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec5_uma1::before{
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top:0;
  bottom: 0;
  right: 0;
  left:0;
  margin: auto;

  background-image: url("../image/sec5_uma1bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: min(290px,24.2vw) min(290px,24.2vw);

  -webkit-animation: backgroundAnimation 36s infinite linear;
  animation: backgroundAnimation 36s infinite linear;
}

.sec5_uma2{
  position: absolute;
  top:40%;
  left: -15%;
  width:calc(351vw / 12) ;
  max-width:351px;
  height: calc(288vw / 12);
  max-height: 288px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec5_uma2::before{
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top:0;
  bottom: 0;
  right: 0;
  left:0;
  margin: auto;

  background-image: url("../image/sec5_uma1bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: min(290px,24.2vw) min(290px,24.2vw);

  -webkit-animation: backgroundAnimation 36s infinite linear;
  animation: backgroundAnimation 36s infinite linear;
}

.sec5_uma3{
  position: absolute;
  bottom:17%;
  right: -14%;
  width:calc(378vw / 12) ;
  max-width:378px;
  height: calc(288vw / 12);
  max-height: 288px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec5_uma3::before{
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top:0;
  bottom: 0;
  right: 0;
  left:0;
  margin: auto;

  background-image: url("../image/sec5_uma1bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: min(290px,24.2vw) min(290px,24.2vw);

  -webkit-animation: backgroundAnimation 36s infinite linear;
  animation: backgroundAnimation 36s infinite linear;
}

/*****************************************************
*****************************************************


kotei

section5 CSS

SP


*****************************************************
*****************************************************/
@media(max-width:550px){

.sec5_flm{
  margin:0 auto;
  padding:0 0 7vw 0;
  width: 100%;
  height: auto;
  max-width: initial;
}

.sec5_logo{
  position: relative;
  margin:2vw 0 0 0;
  max-width: initial;
  width: calc(450vw / 5);
  height: calc(378vw / 5);
  max-height: initial;
}

.sec5_logo::before{
  background-image: url("../image/sec5_logobg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(380vw / 5) calc(380vw / 5);
}

.sec5_ttl{
  margin: -3vw 0 0 0;
  max-width: initial;
  width: calc(450vw / 5);
  height: auto;
}

.sec5_redflm{
  position: relative;
  z-index:-2;
  margin:3vw 0 0 0;
  padding: 0;

  width: calc(450vw / 5);
  max-width: initial;
  height: calc(1715vw / 5);
  max-height: initial;
}

.sec5_img1{
  margin: -3vw 0 0 0;
  width:calc(435vw / 5) ;
  max-width:initial;
}

.sec5_img{
  margin: -8vw 0 0 0;
  width:calc(435vw / 5) ;
  max-width:initial;
}

.sec5_img4{
  margin: -8vw 0 -3vw 0;
  width:calc(435vw / 5);
  max-width:initial;
}

.sec5_uma1{
  position: absolute;
  top:23%;
  right: -7%;
  width:calc(194vw / 5) ;
  max-width:initial;
  height:calc(157vw / 12);
  max-width:initial;
}

.sec5_uma1::before{
  background-image: url("../image/sec5_uma1bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(157vw / 5) calc(157vw / 5);
}

.sec5_uma2{
  position: absolute;
  top:47%;
  left: -8%;
  width:calc(190vw / 5) ;
  max-width:initial;
  height: calc(157vw / 5);
  max-width:initial;
}

.sec5_uma2::before{
  background-image: url("../image/sec5_uma1bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(157vw / 5) calc(157vw / 5);
}

.sec5_uma3{
  position: absolute;
  bottom:20%;
  right: -7%;
  width:calc(205vw / 5) ;
  max-width:initial;
  height: calc(157vw / 5);
  max-width:initial;
}

.sec5_uma3::before{
  background-image: url("../image/sec5_uma1bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(157vw / 5) calc(157vw / 5);
}


}


/*****************************************************
*****************************************************


kotei

section6 CSS

PC


*****************************************************
*****************************************************/

.sec6{
  margin: 0 auto;
  padding:min(1px , 1vw) 0 calc(2% + 410px) 0;/*81px + 100px?*/
  width: 100%;
  height: auto;

  background-color: #7DD76D;
  background-image: url("../image/sec6_bg.svg");
  background-position: center center;
  background-repeat: repeat;
  background-size: 27.5px 27.5px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;

}

.sec6_flm{
  
  margin: 0;
  padding: min(72px,6vw) 0 min(18px,1.5vw) 0;
  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec6_ttl{
  position: relative;
  margin: 0;
  width: calc(1000vw / 12);
  max-width: 1000px;
  height: calc(66vw / 12);
  max-height: 66px;

  background-image: url("../image/sec6_ttl.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec6_dragon1{
  position: absolute;
  top:max(-108px , -9vw);
  left: max(-96px , -8vw);
  width: calc(174vw / 12);
  max-width: 174px;
  height:auto;
}

.sec6_dragon2{
  position: absolute;
  top:max(-108px , -9vw);
  right: max(-96px , -8vw);
  width: calc(171vw / 12);
  max-width: 171px;
  height:auto;
}

.sec6_ttl2{
  margin: 0 0 min(24px , 2vw) 0;
  width: calc(966vw / 12);
  max-width: 966px;
  height: auto;
}

.sec6_pfflx{
  margin:0;
  padding: 0;
  width: calc(1000vw / 12);
  max-width: 1000px;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/*** performance  PC****/

.pfflm{
  position: relative;
  margin: 7px 7px;
  width: 315px;
  height: 315px;

  border: #fff 3px solid;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pfflm::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: #000 4px solid;
  border-radius: 12px;
}

.pfflm_head{
      position: relative;
      width: 100%;
      height: 40px;
      padding: 2px 16px 0 16px;
      border: #000 solid;
      border-width: 4px 4px 0 4px;
      border-radius: 12px 12px 0 0;

      
      color: #fff;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 1;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .pfhead_name{
      display: flex;
      align-items: center;
    }

    .pfheadtxt1{
      margin: 0 0 0 4px;
      font-size: 0.7em;
    }

    .pfheadtxt2{
        font-size: 0.8em;
    }


    .pln1 .pfflm_head,.pln2 .pfflm_head,.pln3 .pfflm_head,.pln4 .pfflm_head,.pln5 .pfflm_head,.pln6 .pfflm_head,.pln7 .pfflm_head,.pln8 .pfflm_head,.pln9 .pfflm_head,.pln21 .pfflm_head,.pln22 .pfflm_head,.pln23 .pfflm_head,.pln24 .pfflm_head,.pln25 .pfflm_head,.pln26 .pfflm_head,.pln27 .pfflm_head,.pln28 .pfflm_head,.pln29 .pfflm_head{
      background-color: #BB2F25;
    }

    .pln11 .pfflm_head,.pln12 .pfflm_head,.pln13 .pfflm_head,.pln14 .pfflm_head,.pln15 .pfflm_head,.pln16 .pfflm_head,.pln17 .pfflm_head,.pln18 .pfflm_head,.pln19 .pfflm_head,.pln31 .pfflm_head,.pln32 .pfflm_head,.pln33 .pfflm_head,.pln34 .pfflm_head,.pln35 .pfflm_head,.pln36 .pfflm_head,.pln37 .pfflm_head,.pln38 .pfflm_head,.pln39 .pfflm_head{
      background-color: #00a99d;
    }

    .pln1 .pfflm_head::before,.pln2 .pfflm_head::before,.pln3 .pfflm_head::before,.pln4 .pfflm_head::before,.pln5 .pfflm_head::before,.pln11 .pfflm_head::before,.pln12 .pfflm_head::before,.pln13 .pfflm_head::before,.pln14 .pfflm_head::before,.pln15 .pfflm_head::before{
      position: absolute;
      content: "";
      width: 21px;
      height: 21px;

      top:7px;
      right:64px;

      background-image: url("../image/pf_no1.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pln21 .pfflm_head::before,.pln22 .pfflm_head::before,.pln23 .pfflm_head::before,.pln24 .pfflm_head::before,.pln25 .pfflm_head::before,.pln26 ,.pln31 .pfflm_head::before,.pln32 .pfflm_head::before,.pln33 .pfflm_head::before,.pln34 .pfflm_head::before,.pln35 .pfflm_head::before,.pln36 .pfflm_head::before{
      position: absolute;
      content: "";
      width: 21px;
      height: 21px;

      top:7px;
      right:64px;

      background-image: url("../image/pf_no2.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pln7 .pfflm_head::before,.pln8 .pfflm_head::before,.pln9 .pfflm_head::before,.pln17 .pfflm_head::before,.pln18 .pfflm_head::before,.pln19 .pfflm_head::before{
      position: absolute;
      content: "";
      width: 21px;
      height: 21px;

      top:7px;
      right:54px;

      background-image: url("../image/pf_no3.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pfflm_img{
      width: 100%;
      height: 172px;
      background-color: #C2C8D4;
    }

    .pfflm_foot{
      width: 100%;
      height: 104px;
      padding: 8px 0;
      border-radius: 0 0 12px 12px;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .pln1 .pfflm_foot,.pln2 .pfflm_foot,.pln3 .pfflm_foot,.pln4 .pfflm_foot,.pln5 .pfflm_foot,.pln6 .pfflm_foot,.pln7 .pfflm_foot,.pln8 .pfflm_foot,.pln9 .pfflm_foot,.pln21 .pfflm_foot,.pln22 .pfflm_foot,.pln23 .pfflm_foot,.pln24 .pfflm_foot,.pln25 .pfflm_foot,.pln26 .pfflm_foot,.pln27 .pfflm_foot,.pln28 .pfflm_foot,.pln29 .pfflm_foot{
      background-color: #BB2F25;
      background-image: url("../image/pfcenter_bg.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pln11 .pfflm_foot,.pln12 .pfflm_foot,.pln13 .pfflm_foot,.pln14 .pfflm_foot,.pln15 .pfflm_foot,.pln16 .pfflm_foot,.pln17 .pfflm_foot,.pln18 .pfflm_foot,.pln19 .pfflm_foot,.pln31 .pfflm_foot,.pln32 .pfflm_foot,.pln33 .pfflm_foot,.pln34 .pfflm_foot,.pln35 .pfflm_foot,.pln36 .pfflm_foot,.pln37 .pfflm_foot,.pln38 .pfflm_foot,.pln39 .pfflm_foot{
      background-color: #00a99d;
      background-image: url("../image/pflocal_bg.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pfflm_footdate{
      color: #fff;
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 1px;
      text-align: center;
    }

    .pfflm_footrace{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.4;
    }

    .pfflm_footrace_arr{
      margin: 0 12px;
      display: block;
      width: 16px;
      height: 13px;
      background-image: url("../image/pf_arr.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pfflm_value{
      color: #fff000;
      font-size: 1.9rem;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 1px;
    }
    .pfflm_values{
      color: #fff000;
      font-size: 0.7em;
      line-height: 1.3;
      letter-spacing: 1px;
    }

    .pfflm_valuess{
      margin: 0 0 0 4px;
      color: #fff;
      font-size: 0.7em;
      line-height: 1.3;
      letter-spacing: 1px;
    }


/*****************************************************
*****************************************************


kotei

section6 CSS

SP


*****************************************************
*****************************************************/

@media(max-width:550px){


.sec6{
  margin: 0 auto;
  padding:6vw 0 calc(150vw / 5) 0;/*footer{ margin:calc(-124vw / 5) 0 0 0;*/
  width: 100%;
  height: auto;
}

.sec6_flm{
  margin: 0;
  padding: 0 0 0 0;
  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec6_ttl{
  position: relative;
  margin: 0;
  width: calc(901vw / 10);
  max-width: initial;
  height: calc(211vw / 10);
  max-height: initial;

  background-image: url("../image/sec6_ttl_sp.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec6_dragon1{
  position: absolute;
  top:13vw;
  left:-5vw;
  width: calc(228vw / 10);
  max-width:initial;
  height:auto;
}

.sec6_dragon2{
  position: absolute;
  top:13vw;
  right: -5vw;
  width: calc(224vw / 10);
  max-width:initial;
  height:auto;
}

.sec6_ttl2{
  margin: 2vw 0 2vw 0;
  width: calc(876vw / 10);
  max-width: initial;
  height: auto;
}

.sec6_pfflx{
  margin:0;
  padding: 0;
  width: 100vw;
  max-width: initial;
  height: auto;
}

   /*** performance  SP****/

    .pfflm{
      position: relative;
      margin: 6px 6px;
      width: calc(215vw / 5);
      height: calc(240vw / 5);

      border: #fff 2px solid;
      border-radius: 8px;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .pfflm::before{
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      border: #000 3px solid;
      border-radius: 8px;
    }

    .pfflm_head{
      position: relative;
      width: 100%;
      height: calc(32vw / 5);
      padding: 1px 1.5vw 0.5vw 1.5vw;
      border: #000 solid;
      border-width: 3px 3px 0 3px;
      border-radius: 8px 8px 0 0;

      
      color: #fff;
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .pfhead_name{
      display: flex;
      align-items: center;
    }

    .pfheadtxt1{
      margin: 0 0 0 4px;
      font-size: 0.7em;
    }

    .pfheadtxt2{
        font-size: 0.8em;
    }


    .pln1 .pfflm_head::before,.pln2 .pfflm_head::before,.pln3 .pfflm_head::before,.pln4 .pfflm_head::before,.pln5 .pfflm_head::before,.pln6 .pfflm_head::before,.pln11 .pfflm_head::before,.pln12 .pfflm_head::before,.pln13 .pfflm_head::before,.pln14 .pfflm_head::before,.pln15 .pfflm_head::before,.pln6 .pfflm_head::before{
      position: absolute;
      content: "";
      width:calc(16vw / 5);
      height:calc(16vw / 5);

      top:5px;
      right:calc(44vw / 5);

      background-image: url("../image/pf_no1.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pln21 .pfflm_head::before,.pln22 .pfflm_head::before,.pln23 .pfflm_head::before,.pln24 .pfflm_head::before,.pln25 .pfflm_head::before,.pln26 ,.pln31 .pfflm_head::before,.pln32 .pfflm_head::before,.pln33 .pfflm_head::before,.pln34 .pfflm_head::before,.pln35 .pfflm_head::before,.pln36 .pfflm_head::before{
      position: absolute;
      content: "";
      width:calc(16vw / 5);
      height:calc(16vw / 5);

      top:5px;
      right:calc(44vw / 5);

      background-image: url("../image/pf_no2.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pln7 .pfflm_head::before,.pln8 .pfflm_head::before,.pln9 .pfflm_head::before,.pln17 .pfflm_head::before,.pln18 .pfflm_head::before,.pln19 .pfflm_head::before{
      position: absolute;
      content: "";
      width:calc(16vw / 5);
      height:calc(16vw / 5);

      top:5px;
      right:calc(36vw / 5);

      background-image: url("../image/pf_no3.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pfflm_img{
      width: 100%;
      height: calc(114vw / 5);
      background-color: #C2C8D4;
    }

    .pfflm_foot{
      width: 100%;
      height: calc(88vw / 5);
      padding: calc(10vw / 5) 0;
      border-radius: 0 0 8px 8px;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .pln1 .pfflm_foot,.pln2 .pfflm_foot,.pln3 .pfflm_foot,.pln4 .pfflm_foot,.pln5 .pfflm_foot,.pln6 .pfflm_foot,.pln7 .pfflm_foot,.pln8 .pfflm_foot,.pln9 .pfflm_foot,.pln21 .pfflm_foot,.pln22 .pfflm_foot,.pln23 .pfflm_foot,.pln24 .pfflm_foot,.pln25 .pfflm_foot,.pln26 .pfflm_foot,.pln27 .pfflm_foot,.pln28 .pfflm_foot,.pln29 .pfflm_foot{
      background-color: #BB2F25;
      background-image: url("../image/pfcenter_bg_sp.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pln11 .pfflm_foot,.pln12 .pfflm_foot,.pln13 .pfflm_foot,.pln14 .pfflm_foot,.pln15 .pfflm_foot,.pln16 .pfflm_foot,.pln17 .pfflm_foot,.pln18 .pfflm_foot,.pln19 .pfflm_foot,.pln31 .pfflm_foot,.pln32 .pfflm_foot,.pln33 .pfflm_foot,.pln34 .pfflm_foot,.pln35 .pfflm_foot,.pln36 .pfflm_foot,.pln37 .pfflm_foot,.pln38 .pfflm_foot,.pln39 .pfflm_foot{
      background-color: #00a99d;
      background-image: url("../image/pflocal_bg_sp.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pfflm_footdate{
      color: #fff;
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.5px;
      text-align: center;
    }

    .pfflm_footrace{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      color: #fff;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.3;
    }

    .pfflm_footrace_arr{
      margin: 0 calc(4vw / 5);
      display: block;
      width: calc(14vw / 5);
      height: calc(12vw / 5);
      background-image: url("../image/pf_arr.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pfflm_value{
      color: #fff000;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.5px;
    }
    .pfflm_values{
      color: #fff000;
      font-size: 0.7em;
      line-height: 1.2;
      letter-spacing: 1px;
    }

    .pfflm_valuess{
      margin: 0 0 0 3px;
      color: #fff;
      font-size: 0.7em;
      line-height: 1.2;
      letter-spacing: 1px;
    }

}

/***********************************************

kotei mail privacy rule outline
PC

*************************************************/

/*point2 bank Info*/
.basicbox{
  margin: 36px auto 0 auto;
  width:calc(800vw / 12);
  max-width:800px;
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.basicflm{
  width: 100%;
  height: auto;

  margin: 0;
  padding:48px 36px;

  /*display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;*/

  border: solid #ffd400 8px;
  box-shadow: 0px 3px 0px 5px rgba(0, 0, 0, 1), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff;

  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;
}

.basicinput{
  margin: 0 0 24px 0;
  width: 100%;
  height: auto;

  padding:12px 36px;

  /*display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;*/

  border: solid #ffd400 8px;
  box-shadow: 0px 3px 0px 5px rgba(0, 0, 0, 1), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff;

  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;

}

.maildate{
  font-size: 0.85rem;
  letter-spacing: 1px;
  line-height: 1.6;
}

.mailread1{
  margin: 0 4px;
  padding:2px 4px;
  color: #fff;
  background-color: #ff0000;
  border-radius: 8px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  line-height: 1.6;
}

.mailread2{
  margin: 0 4px;
  padding:2px 4px;
  color: #fff;
  background-color: #0000ff;
  border-radius: 8px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  line-height: 1.6;
}

.mailfrom{
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1.6;
}

.mailheadline{
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.6;
}

.mailborder{
  width: 100%;
  margin: 12px 0 0 0;
  padding: 0 0 16px 0;
  background-image: repeating-linear-gradient(90deg, #000000, #000000 12px, transparent 12px, transparent 16px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 100% 2px;
}

.contact_att{
  margin: 36px 0 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.45;
}

.adbox{
  margin: 26px auto 0 auto;
  width: calc(1200vw / 12);
  max-width: 1200px;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.aditem{
  margin: 10px 10px;
  width: 320px;
  height: 96px;
}
/***********************************************

kotei mail privacy rule outline
SP

*************************************************/

@media(max-width:550px){

.basicbox{
  margin: calc(36vw / 5) auto 0 auto;
  width:calc(450vw / 5);
  max-width:initial;
  height: auto;
}

.basicflm{
  width: 100%;
  height: auto;

  margin: 0;
  padding:calc(24vw / 5) calc(18vw / 5);

  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;
}

.basicinput{
  width: 100%;
  height: auto;

  margin: 0 0 calc(24vw / 5) 0;
  padding:calc(12vw / 5) calc(18vw / 5);

  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;
}

.adbox{
  margin: calc(26vw / 5) auto 0 auto;
  width: calc(450vw / 5);
  max-width: initial;
  height: auto;
}

.aditem{
  margin: 2vw 0;
  width: calc(420vw / 5);
  height:calc(126vw / 5);
}

}

/************************************************
見出しフレーム
***********************************************/
.ttlflm{
 margin: 112px auto 0 auto;/*66px*/
  width:calc(800vw / 12);
  max-width: 800px;
  height:calc(66vw / 12);
  max-height: 66px;
}

.ttlflm1{
 margin: 66px auto 0 auto;
  width:calc(643vw / 12);
  max-width: 644px;
  height:calc(66vw / 12);
  max-height: 66px;
}

.ttlflm11{
 margin: 36px auto 0 auto;
  width:calc(643vw / 12);
  max-width: 644px;
  height:calc(66vw / 12);
  max-height: 66px;
}

.ttlflm2{
  margin: 60px auto 36px auto;
  width:calc(800vw / 12);
  max-width: 800px;
  height:calc(66vw / 12);
  max-height: 66px;
}

/********************************************
汎用ボタン
*********************************************/
.btnflm{
  margin: 36px auto;
  width: 220px;
  height: 70px;

  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  
  background-color: #0000ff;
  border-radius: 8px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.btnflm2{
  margin: 12  px auto;
  width: 220px;
  height: 50px;

  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
  
  background-color: #0000ff;
  border-radius: 8px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.pagingflm{
  margin: 46px auto 0 auto;
  width: 300px;
  height: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagingitem_prev{
  width: 112px;
  height: 56px;
  padding: 0 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #0000ff;
  border-radius: 6px;
  color:#fff;
  font-size: 1.4rem;
  font-weight: 600;
}

.pagingitem_next{
  width: 112px;
  height: 56px;
  padding: 0 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #0000ff;
  border-radius: 6px;
  color:#fff;
  font-size: 1.4rem;
  font-weight: 600;
}

.pagingitem_current{
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff0000;
  border-radius: 6px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
}

/**************************************************************

kotei

SP css

共通　固定背景 
共通　タイトル

***************************************************************/

@media(max-width:550px){

/*****************
main background SP
******************/

  .secbg{
    margin: 0 auto;
    padding:0 0 calc(150vw / 5) 0;/*footer{ margin:calc(-124vw / 5) 0 0 0;*/
    width: 100%;
    height: auto;
  }

  .secbg_flm{
    margin: 0;
    padding: 0 0 0 0;
    width: 100%;
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .secbg1{
    margin:0 auto 0 auto;
    padding:0 0 calc(150vw / 5) 0;/*footer{ margin:calc(-124vw / 5) 0 0 0;*/
    width: 100%;
    height: auto;
  }

/************************************************
見出しフレーム
***********************************************/
.ttlflm{
  margin: calc(72vw / 5) auto 0 auto;/*36vw*/
  width:calc(450vw / 5);
  max-width: initial;
  height:calc(65vw / 5);
  max-height: initial;
}

.ttlflm1{
  margin: calc(36vw / 5) auto 0 auto;
  width:calc(450vw / 5);
  max-width: initial;
  height:calc(65vw / 5);
  max-height: initial;
}

.ttlflm11{
  margin: calc(36vw / 5) auto 0 auto;
  width:calc(450vw / 5);
  max-width: initial;
  height:calc(65vw / 5);
  max-height: initial;
}

.ttlflm2{
  margin: calc(36vw / 5) auto 0 auto;
  width:calc(450vw / 5);
  max-width: initial;
  height:calc(65vw / 5);
  max-height: initial;
}


/********************************************
汎用ボタン
*********************************************/
.btnflm{
  margin: calc(36vw / 5) auto;
  width: calc(300vw / 5);
  height: calc(95vw / 5);

  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;
}

  .pageingflm{
    margin: calc(46vw / 5) 0 0 0;
  }

  .pageingitem{
    width: calc(68vw / 5);
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.6rem;
  }
  
  .pageingitem_current{

  }

}