@charset "UTF-8";
/* CSS Document */

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

	汎用CSS
	
********************/
/*div幅指定用*/

.w100 {width: 100%;}

.w90 {width: 90%;}
.w80 {width: 80%;}
.w70 {width: 70%;}
.w60 {width: 60%;}
.w50 {width: 50%;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w33 {width: 33%;}

.w90-w100 , .w80-w100 , .w70-w100 , .w65-w100 , .w60-w100 , .w50-w100 , .w40-w100 , .w30-w100{
  margin-left: auto;
  margin-right: auto;
}

.w90-w100 {width: 90% !important;}
.w80-w100 {width: 80% !important;}
.w70-w100 {width: 70% !important;}
.w65-w100 {width: 65% !important;}
.w60-w100 {width: 60% !important;}
.w50-w100 {width: 50% !important;}
.w40-w100 {width: 40% !important;}
.w30-w100 {width: 30% !important;}

.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt-5 {margin-top: -5px;}
.mt-4 {margin-top: -4px;}
.mt-3 {margin-top: -3px;}
.mt-2 {margin-top: -2px;}
.mt-1 {margin-top: -1px;}
.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.ml0 {margin-left: 0 !important;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}

.mt40 , .mt50 , .mt60 , .mt70 , .mt80 , .mt90 , .mt100 {margin-top: 30px;}

.mb40 , .mb50 , .mb60 , .mb70 , .mb80 , .mb90 , .mb100 , .mb120 , .mb130 , .mb150 , .mb200 , .mb230 {margin-bottom: 30px;}
.pb50 , .pb60 , .pb70 , .pb80 {padding-bottom: 40px;}

.pb0{padding-bottom:0 !important;}

.mb40-mb20{margin-bottom: 40px;}

/* ------------------------ パソコン ------------------------ */
@media screen and (min-width: 768px) {

	/*マージン調整用*/

	.mb0-pc{margin-bottom: 0 !important;}

	.ml10 {margin-left: 10px;}
	.ml20 {margin-left: 15px;}

	.mr0 {margin-right: 0 !important;}

	.mt40 {margin-top: 40px;}
	.mt50 {margin-top: 50px;}
	.mt60 {margin-top: 60px;}
	.mt70 {margin-top: 70px;}
	.mt80 {margin-top: 80px;}
	.mt90 {margin-top: 90px;}
	.mt100 {margin-top: 100px;}

	.mb10-1000 {margin-bottom: 10px;}

	.mb15 {margin-bottom: 15px !important;}
	.mb40 {margin-bottom: 40px !important;}
	.mb50 {margin-bottom: 50px !important;}
	.mb60 {margin-bottom: 60px !important;}
	.mb70 {margin-bottom: 70px !important;}
	.mb80 {margin-bottom: 80px !important;}
	.mb90 {margin-bottom: 90px !important;}
	.mb100 {margin-bottom: 100px !important;}
	.mb120 {margin-bottom: 120px !important;}
	.mb130 {margin-bottom: 130px !important;}
	.mb150 {margin-bottom: 150px !important;}
	.mb200 {margin-bottom: 200px !important;}
	.mb230 {margin-bottom: 230px !important;}

	.pb15 {padding-bottom: 15px !important;}
	.pb40 {padding-bottom: 40px !important;}
	.pb50 {padding-bottom: 50px !important;}
	.pb60 {padding-bottom: 60px !important;}
	.pb70 {padding-bottom: 70px !important;}
	.pb80 {padding-bottom: 80px !important;}
	.pb90 {padding-bottom: 90px !important;}
	.pb100 {padding-bottom: 100px !important;}
	.pb110 {padding-bottom: 110px !important;}
	.pb120 {padding-bottom: 120px !important;}
	.pb130 {padding-bottom: 130px !important;}

	.mb40-mb20{margin-bottom: 20px;}
  
	.mb120-pc {margin-bottom: 120px !important;}

	
	/*フォント用*/
	.fs80 {font-size: 80%;}
	.fs90 {font-size: 90%;}

	.talg_C_pc {
		text-align: center;
	}
  .w100-pc{
    width: 100%;
  }

}

.red {
  color: #dc001e;
}

/* ------------------------------------------
  ヘッダー
--------------------------------------------- */
header {height: 90px;}
header h1{
  position: absolute;
  top: 25px;
  left: 30px;
  z-index: 9999;
}
header h1 a{
    width: 250px;
    display: block;
    line-height: 1;
}
@media (width <= 768px) {
header {height: 0px;}    
header h1{top: 17px;}
}

/* -----------------------------------
   ヘッダー画像
 * ----------------------------------- */
#img-header{
    position: relative;
    z-index: -1;
    width: 100%;
    min-height: 700px;
    background-size: cover;
    background-position: center;
    animation: bg-headerimg 1s ease .5s 1 normal backwards;
}
@keyframes bg-headerimg {
  from {
      opacity: 0;
      transform: translate(-50%);}
  to {
      opacity: 1;
      transform: translate(0%);}
}


@media (width <= 768px) {
#head{padding-top: 1rem}    
#img-header{
    width: 100%;
    min-height: 250px;}     
}


/* -----------------------------------
   フッター
 * ----------------------------------- */
footer h2{width: 200px;}


/* -----------------------------------
   見出し
 * ----------------------------------- */
.txt-s{font-size: var(--font-size-xs)}
.txt-sup{
	font-size: 75.5%;
	vertical-align: top;
	position: relative;
	top: -0.03em;
	padding-left: 1px;
	padding-right: 1px;
}
h2.p01 {
  font-size: 28px;
	font-family: 'Noto Sans JP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 60px;
  padding-left: 57px;
  background-image: url("../images/h-icon.png");
  background-position: center left;
  background-size: 38px auto;
  background-repeat: no-repeat;
}
h2.p04 {
  font-size: 30px;
	font-family: 'Noto Sans JP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 40px;
  padding-left: 45px;
  background-image: url("../images/h-icon.png");
  background-position: top 10px left;
  background-size: 30px auto;
  background-repeat: no-repeat;
}
h3.p01 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #868686;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

  h2.p01 {
    font-size: 23px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-left: 35px;
    background-size: 23px auto;
  }
  h2.p04 {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-left: 30px;
    background-size: 20px auto;
    background-position: top 7px left;
  }
  h3.p01 {
    font-size: 18px;
    margin-bottom: 20px;
  }    
}

/* -----------------------------------
   コンテンツ
 * ----------------------------------- */
.single-box{
	display:flex; 
	justify-content: space-between;
	flex-wrap: wrap;
}
.single-box .image-box {
  width: 30%;
}
.single-box .image-box ul {
}
.single-box .image-box ul li {
  margin-bottom: 30px;
}
.single-box .image-box ul li img {
  width: 100%;
}
.single-box img.color-v {
  width: auto;
  height: 70px;
}
.single-box img.color-v02 {
  width: auto;
  height: 160px;
}
.single-box img.color-v03 {
  width: auto;
  height: 115px;
}
.single-box .data-box {
  width: 64%;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

  .single-box .image-box {
    width: 100%;
    margin-bottom: 10px;
  }
  .single-box .image-box ul {
  }
  .single-box .image-box ul li {
    margin-bottom: 20px;
  }
  .single-box .image-box ul li:first-child img {
    width: 70%;
    margin: 0 15%;
    margin-bottom: 15px;
  }
  .single-box img.color-v , .single-box img.color-v02 , .single-box img.color-v03 {
    width: 100%;
    height: auto;
  }
  .single-box .data-box {
    width: 100%;
  }
  .single-box .data-box .button04 {
    text-align: center;
  }

}


/*---------------------------------------------
	キャンペーン
  ---------------------------------------------*/
#campaign p, #campaign li, #campaign dt, #campaign dd , #campaign table{font-size: 16px}
#campaign li{
    line-height: var(--line-height-s);
    margin-bottom: 5px;
}
#campaign h2{
    font-size: clamp(1.563rem, 1.222rem + 1.7vw, 2.5rem); /* 25-40px */
    text-align: center;
}
#campaign h3{
    font-size: var(--font-size-xl);
    color: var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
    margin-top: 3rem;
    margin-bottom: 1rem;
    line-height: var(--line-height-s)
}
#campaign h4{
    font-size: var(--font-size-l);
    margin-top: 1.5rem;
    margin-bottom: 0.2rem;
}

#logo-gifteebox{
    display: block;
    width: 130px;
    line-height: 0
}
#campaign .box-gray{font-weight: bold}


.column-box  table th,
.column-box  table td{padding: 1px 2px}

.plus{
    font-weight: bold;
    font-size: 40px;
    margin: 5.5rem 1rem 0;
}

.box-present{
    margin: 2rem auto;
    background-color: #747B80;
    color: #ffffff;
    padding: 50px;
}
#campaign .box-present dl{
}
#campaign .box-present dt{
    font-size: var(--font-size-3xl);
    font-weight: bold;
    margin-right: 10px;
}
#campaign .box-present dd{
    font-size: var(--font-size-l);
    line-height: var(--line-height-s);
}
#campaign .box-present p{line-height: var(--line-height-s);}

@media only screen and (max-width:768px){
#flex-box{width: 330px}    
.plus{width: 100%;
    text-align: center;
    line-height: var(--line-height-s);
    margin-top: 0
}   
.box-present{padding: 15px 20px;}       
}


/* フォーム */
#column-form {max-width: 1000px;}
#column-form h3{
    text-align: center;
    background-color: #444444;
    color: #ffffff;
    margin-top: 5rem;
    padding: 3px 3px 5px;
    font-size: var(--font-size-m);
}
.txt-q{
    font-weight: bold;
    padding-left: 40px
}
.txt-a{
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    padding-left: 40px;
    border-bottom: 1px dotted #cccccc
}
.no-border{
    padding-bottom: 0rem;
    border-bottom: none
}
.top-border{
    border-top: 1px dotted #cccccc;
    padding-top: 2rem;
}
.txt-a span{
    display: block;
    font-size: 85%;
    color: var(--color-red);
    margin-top: 10px;
    line-height: var(--line-height-s)
}
.icon-required,
.icon-any {
    background: #e53935;
    color: #ffffff !important;
    padding: 0.25rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 12px!important;
    font-weight: bold;
    margin-right: 0.5rem;
    vertical-align: baseline;
    white-space: nowrap;
    line-height: 1;
    margin-left: -40px;
    width: 36px;
    display: inline-block !important;
    text-align: center;
}
.icon-any{background-color: #666666}
form input,
form select,
form textarea{
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding-left: 5px;
}
form textarea{width: 100%}
form input[type="file"]{
    padding-left: 0px;
    font-size: 16px;
}
form input::placeholder {
    color: #AAAAAA;
    font-weight: normal !important;
}
#column-form label:has(input[type="checkbox"]) ,
#column-form .radio-block label:has(input[type="radio"]){
    display: block;
    margin-left: 0
}

#column-form label + label {margin-left: 20px}

.tab {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0 0 20px;
}
.tab .tab-form {display: none;}
.tab label.tab-label {
    color: #ffffff;
    background-color: #666666;
    cursor: pointer;
    flex: 1;
    font-weight: bold;
    order: -1;
    padding: 12px 24px;
    position: relative;
    text-align: center;
    transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
}
.tab label#tab-form_1 {
    clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
}
.tab label#tab-form_2 {
    clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}
.tab label#tab-form_3 {
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
}
.tab label.tab-label:hover {background-color: #1f2b80}
.tab label.tab-label:hover, .tab label.tab-label:has(:checked) {
    background-color: #1f2b80;
    transition: var(--transition);
}
.tab .tab-content {
    width: 100%;
    height: 0;
    opacity: 0;
    padding: 20px 20px 0;
    transform: translateX(-30%);
    transition: transform .3s 80ms, opacity .3s 80ms;
}
.tab label.tab-label:has(:checked) + .tab-content{
    height: auto;
    opacity: 1;
    order: 1;
    pointer-events: auto;
    transform: translateX(0);
    position: relative;
    z-index: 1
}
#form-submit input {display: block}

#campaign p.form-ttl {
    text-align: center;
    font-weight: bold;
    color: #1f2b80;
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: var(--font-size-l)
}
#campaign p.form-ttl_2 {font-weight: bold;}
.block-check{
    text-align: center;
    background-color: #F3F3F3;
    padding: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem
}

.btn-next a,
.btn-back a,
.form-btn{
    background-color: #1f2b80;
    color: #ffffff;
    height: 60px;
    width: 300px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem auto 0;
}
.btn-back a{
    font-size: 16px;
    background-color: #666666;
    width: 140px;
}
@media screen and (max-width: 768px){
#column-form{width: 95%}   
.txt-a{padding-left: 0}    
.tab label.tab-label{
    padding: 6px 10px;
    font-size: 15px
    }    
#column-form label{display: block}    
#column-form label + label {margin-left: 0px}    
#campaign p.form-ttl_2{text-align: left}    
.form-buttons{
    width: 160px;
    margin: 3rem auto 30px;
}   
.txt-a span{margin-left: 0}    
}