@charset "UTF-8";

/* ----------------------------------------------------
element base setting
---------------------------------------------------- */

body{
    color: #666;
    line-height: 1.8;
    background: #f4f4f4;
    font-size: clamp(14px, 2vw, 16px);
}
a{
    color: #533727;
    text-decoration: none;
}
img{
	width: 100%;
	height: auto;
}

/* ----------------------------------------------------
module
---------------------------------------------------- */
.flex{
    display: -webkit-flex;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .content{
      width: 86%;
      max-width: 1046px;
      margin-right: auto;
      margin-left: auto;
      position: relative;
  }
  .ff--sans{font-family: 'Noto Sans JP', sans-serif;}
  .ff--en{font-family: adorn-garland, sans-serif;}
  .flex-jc--s {justify-content: flex-start;}
  .flex-jc--c {justify-content: center;}
  .flex-ai--c {align-items: center;}
  
  .ff--round{ font-family: 'Rounded Mplus 1c'!important;transform: rotate(0.03deg); }
  
  .alignL {text-align:left!important}
  .alignC {text-align:center!important}
  .alignR {text-align:right!important}
  
  .fs_16{
      font-size:16px
  }
  .fs_21{
      font-size:21px;
  }
  .fw_500{
    font-weight:500!important
  }
  .fw_600{
    font-weight:600!important
  }
  .mtop12{
    margin-top:12px!important
  }
  .mbottom12{
    margin-bottom:12px!important
  }
  .mtop22{
    margin-top:22px!important
  }
  .mbottom22{
    margin-bottom:22px!important
  }
  .mtop33{
    margin-top:33px!important
  }
  .mbottom33{
    margin-bottom:33px!important
  }
  .mtop44{
    margin-top:44px!important
  }
  .mbottom44{
    margin-bottom:44px!important
  }
  .maxw800{
    max-width:800px
  }
  .maxw600{
    max-width:600px
  }
  .maxw500{
      max-width:500px
  }
  .mauto{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .ptop0{
    padding-top:0!important
  }
  .mbottom0{
    margin-bottom:0!important
  }
  .width45per{
    width:45%!important
  }
  .width50per{
    width:50%!important
  }
  .width100per{
    width:100%!important
  }
  .width75per{
    width:75%!important
  }
  .fs120per{
    font-size:1.2em!important
  }
  .onlyPC{
    display: none!important;
  }
  .onlySP{
    display: block!important;
  }
  .onlyPCFlex{
    display: none!important;
  }
  .onlySPFlex{
    display: flex!important;
  }
  @media  (min-width: 769px) {
    #navSP{
      display: none
    }
    .onlySP{
      display: none!important;
    }
    .onlyPC{
      display: block!important;
    }
    .onlyPCFlex{
      display: flex!important;
    }
    .onlySPFlex{
      display: none!important;
    }
  }

/* ヘッダー */
header.download{
    /* position: fixed; */
	width: 100%;
	height: 115px;
	/* box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2); */
	/* z-index: 200; */
    /* top: 0; */
    background: #fff;
    display: flex;
	display: -webkit-flex;
    justify-content: center;
	align-items: center;
	/* height: min(14vw, 9rem); */
}
  
/* ダウンロードページ */

.d-page-wrapper {
	background: #fff!important;
}

.d-page {
	margin: 3vh auto;
	font-family: "Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif!important;
	color: #666;
}
.d-page .c-title {
	margin: 2em 0 4em;
}
.d-page h2 {
	font-weight: 600;
	font-size: clamp( 16px, 6vw, 30px);
    text-align: center;
}

.width-wrapper {
	max-width: 750px;
	margin: 0 auto;
}

.d-method,
.s-method,
.about-data {
	padding: 1em 3vw;
}

.d-method h3,
.s-method h3,
.about-data h3 {
	font-size: 1.2em;
	font-weight: bold;
}

.d-method h3 {
	text-decoration: underline;
}

.d-method-img {
	margin-top: 1em;
}
/* .s-method {
	margin-top: 4em;
} */

.s-method-inner {
	border: 1px solid #533727;
	padding: 2em 3vw;
}
.s-method-box {
	margin-bottom: 3em;
}
.s-method-box:last-child {
	margin: 0;
}
.attention {
	font-size: 0.8em;
}

.s-method__child h4 {
	/* display: inline-block;
	border: 1px solid #533727;
	padding: 0.2em 1em;
	background: #fff; */
	/* font-weight: bold; */
	font-size: 1.1em;
}

.s-method-img__flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.s-method-img__flex picture:nth-child(2) {
	width: 70%;
}
.s-method-img__flex picture:first-child {
	max-width: 20%;
}