@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body{
  min-width: 1000px;
  line-height:1;
  font-feature-settings: "palt";
}
@media screen and (max-width: 640px){
  body{
    min-width: initial;
  }
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}
ul,ol{
  list-style:none;
}
blockquote, q{
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content:'';
  content:none;
}
a{
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
/* change colours to suit your needs */
ins{
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}
/* change colours to suit your needs */
mark{
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}
del{
  text-decoration: line-through;
}
abbr[title], dfn[title]{
  border-bottom:1px dotted;
  cursor:help;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}
/* change border colour to suit your needs */
hr{
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
input, select{
  vertical-align:middle;
}
/* reset end */
/* init */
*, *:before, *:after{
  box-sizing: border-box;
}
img{
  vertical-align: bottom;
}
/* font */
#main{
  width: 100%;
  max-width: 1457px;
  margin: 0 auto;
  font-family: 'メイリオ', Meiryo,'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
}
input, select, option, textarea{
  font-family: inherit;
  font-size: 100%;
}
/* clearfix */
.cf:after{
  content:'';
  display:block;
  clear:both;
}
.cb{
  clear: both;
}
.ht{
  white-space: nowrap;
  text-indent: 120%;
  overflow: hidden;
}
.hb{
  width: 0;
  height: 0;
  overflow: hidden;
}
.mb0{
  margin-bottom: 0 !important;
}
/* Link */
a:link,a:visited{
  text-decoration: none;
}
a:hover{
  opacity: 0.8;
  transition: 0.2s ease-out;
  text-decoration: underline;
}
a:active{
  opacity: 0.8;
  text-decoration: underline;
}
#main img {
  display: block;
  width: 100%;
  height: auto;
}
.brandSiteFooter {
  margin-top: 0;
}
.brandSiteFooter .inner {
  max-width: initial;
}
.brandSiteFooter .link a {
  white-space: nowrap;
}
.pageTop > a {
  z-index: 999;
  background: url(../../common/img/pagetop.png) no-repeat 0 0;
  background-size: cover;
}

/* pc sp */
@media print, screen and (min-width: 641px){
  .sp{
    display: none !important;
  }
}
@media screen and (max-width: 640px){
  .pc{
    display: none !important;
  }
  .brandSiteFooter .link {
    padding: 0;
  }
  .brandSiteFooter .link .policy {
    display: block;
    margin-bottom: 0;
  }
  .brandSiteFooter .link .policy li {
    border: none;
  }
}

/*----------- common -----------*/

.container {
  width: calc( 100% - 160px);
  height: auto;
  margin: 0 auto;
  border-right: 25px solid #fffc80;
  border-left: 25px solid #fffc80;
  padding: 0 125px 20px;
}
.font-mincho {
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
}
.section__title {
  position: relative;
  padding-left: 55px;
  font-size: 32px;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
  color: #433787;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.section__title::before {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -7px;
  z-index: 1;
  transform: translateX(-100%);
  width: 64px;
  height: 64px;
  background-color: #fffa00;
}
.section__title::after {
  content: '';
  position: absolute;
  left: -35px;
  bottom: 25px;
  z-index: 2;
  width: 64px;
  height: 64px;
  background-color: #433787;
}
.section__title.colorchange::before {
  background-color: #433787;
}
.section__title.colorchange::after {
  background-color: #fffa00;
}
.section__title.rows::before {
  bottom: 4px;
}
.section__title.rows::after {
  bottom: 35px;
}
.section__smalltitle {
  position: relative;
  padding-left: 57px;
  font-size: 18px;
  font-weight: 700;
  color: #433787;
  line-height: 1.611111;
  letter-spacing: 0.01em;
}
.section__smalltitle::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 46px;
  height: 1px;
  background-color: #433787;
}
.section__text {
  font-size: 16px;
  line-height: 1.8125;
  letter-spacing: 0.01em;
}
.supplement {
  position: relative;
  padding-right: 20px;
}
.supplement_mark {
  position: absolute;
  top: 4px;
  right: 3px;
  font-size: 10px;
  line-height: 1;
}
.section__smalltext {
  font-size: 13px;
  line-height: 1.5384615;
  letter-spacing: 0.01em;
}

@media screen and (max-width: 1300px){
  .container {
    width: calc( 100% - 100px);
    border-right: 20px solid #fffc80;
    border-left: 20px solid #fffc80;
    padding: 0 50px 20px;
  }
  .section__title {
    font-size: 28px;
  }
  .section__title::before {
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
  }
  .section__title::after {

    left: -2px;
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 640px){
  .container {
    width: 100%;
    border-right: 12px solid #fffc80;
    border-left: 12px solid #fffc80;
    padding: 0 24px 7.5px;
  }
  .section__title {
    padding-left: 40px;
    font-size: 19px;
    line-height: 1.3421053;
  }
  .section__title::before {
    top: 0;
    left: -10px;
    bottom: initial;
    transform: translateX(0);
    width: 28.8px;
    height: 28.8px;
  }
  .section__title::after {
    left: 3.7px;
    top: -14px;
    bottom: initial;
    width: 28.8px;
    height: 28.8px;
  }
  .section__title.rows::before {
    bottom: initial;
  }
  .section__title.rows::after {
    bottom: initial;
  }
  .section__smalltitle {
    padding-left: 40px;
    font-size: 14px;
    line-height: 1.4285714;
  }
  .section__smalltitle::before {
    top: 8px;
    left: 0;
    width: 32px;
  }
  .section__text {
    font-size: 14px;
    line-height: 1.7142857;
  }
  .section__smalltext {
    font-size: 11px;
    line-height: 1.6363636;
  }
}

/*----------- FV -----------*/

.fv {
  width: 100%;
  height: 692px;
  margin: 0 auto;
  padding: 65px 230px 0;
  background: url(../img/fv.jpg) bottom center no-repeat;
  background-size: cover;
}
.fv__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 45px;
  background-color: #433787;
  font-size: 29px;
  color: #fffa00;
  line-height: 1;
  letter-spacing: 0.05em;
}
.fv__text {
  margin: 12px auto 0 -8px;
  font-size: 52px;
  font-weight: 500;
  color: #433787;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-feature-settings: initial;
}

@media screen and (max-width: 1300px){
  .fv {
    padding: 65px 120px 0;
  }

  .fv__text {
    font-size: 42px;
  }
}

@media screen and (max-width: 640px){
  .fv {
    position: relative;
    height: auto;
    padding: 92.53333% 0 0 0;
    background: url(../img/fv_sp.jpg) bottom center no-repeat;
    background-size: cover;
  }
  .fv__textbox {
    position: absolute;
    top: 32px;
    left: 25px;
  }
  .fv__label {
    width: 85px;
    height: 23px;
    font-size: 14.5px;
  }
  .fv__text {
    margin: 12px auto 0 -2px;
    font-size: 19px;
    line-height: 1.5789474;
  }
}

/*----------- Introduction -----------*/

.introduction {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 43px 0 0;
}
.introduction__profile {
  position: absolute;
  top: -96px;
  right: -35px;
  width: 400px;
  background-color: #fffc80;
}
.introduction__profile__name {
  display: flex;
  height: 96px;
  align-items: flex-end;
  width: calc( 100% - 44px );
  border-bottom: 2px solid #433787;
  margin: 0 0 0 auto;
  padding: 0 0 16px 2px;
  font-size: 43px;
  font-weight: 400;
  color: #433787;
  line-height: 1;
  letter-spacing: 0.09em;
}
.introduction__profile__name span {
  font-size: 29px;
  line-height: 1;
}
.introduction__profile__text {
  width: 100%;
  height: auto;
  margin: 20px auto 0;
  padding: 0 30px 33.5px 44px;
  font-size: 15px;
  line-height: 1.866667;
  letter-spacing: -0.03em;
}
.introduction__text {
  width: calc( 100% - 380px);
  height: auto;
  font-size: 18px;
  line-height: 2.333333;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 640px){
  .introduction {
    padding: 33px 0 0;
  }
  .introduction__profile {
    position: absolute;
    top: -34px;
    right: -36px;
    width: 206.5px;
  }
  .introduction__profile__name {
    width: 100%;
    height: 47.5px;
    padding: 0 0 9px 19px;
    font-size: 23px;
  }
  .introduction__profile__name span {
    font-size: 15.5px;
  }
  .introduction__profile__text {
    margin: 27.5px auto 0;
    padding: 14px 23px;
    font-size: 12px;
    line-height: 1.833333;
    letter-spacing: 0.01em;
    background-color: #fffc80;
  }
  .introduction__text {
    width: 100%;
    font-size: 13.5px;
    line-height: 1.8518519;
    letter-spacing: 0.03em;
  }
}

/*----------- sec01 -----------*/

#sec01 {
  padding-top: 146px;
}
.sec01__smallsection1 {
  position: relative;
  z-index: 2;
  margin-top: 25px;
}
.sec01__smallsection1 .section__text {
  margin-top: 28px;
}
.sec01__smallsection1__img {
  margin: 39px auto 0 13.13942%;
  width: 53.66098%;
  min-width: 440px;
  height: auto;
}
.sec01__smallsection2 {
  position: relative;
  z-index: 1;
  margin-top: 63.5px;
}
.sec01__smallsection2__textbox {
  width: 54%;
  height: auto;
}
.sec01__smallsection2 .section__text {
  margin-top: 29px;
}
.sec01__smallsection2__img {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate( 230px, -220px);
  width: 63.59077%;
  height: auto;
}

@media screen and (max-width: 1300px){
  .sec01__smallsection2__img {
    transform: translate( 120px, -180px);
    width: 55%;
    min-width: 450px;
  }
}

@media screen and (max-width: 640px){
  #sec01 {
    padding-top: 46px;
  }
  .sec01__smallsection1 {
    margin-top: 17px;
  }
  .sec01__smallsection1 .section__text {
    margin-top: 12px;
  }
  .sec01__smallsection1__img {
    margin: 16px auto 0 auto;
    width: 100%;
    min-width: initial;
  }
  .sec01__smallsection2 {
    margin-top: 26px;
  }
  .sec01__smallsection2__textbox {
    width: 100%;
  }
  .sec01__smallsection2 .section__text {
    margin-top: 13.5px;
  }
  .sec01__smallsection2__img {
    position: relative;
    transform: translateX(-24px);
    width: calc( 100% + 48px );
    min-width: initial;
    margin: 20px auto 0;
  }
}

/*----------- sec02 -----------*/

#sec02 {
  padding-top: 96.5px;
}
.sec02__smallsection1 {
  margin-top: 33px;
}
.sec02__smallsection1 .section__text {
  margin-top: 26px;
}
.sec02__smallsection1 .section__smalltext {
  margin-top: 26px;
}
.sec02__smallsection2 {
  position: relative;
  margin-top: 83px;
}
.sec02__smallsection2__img {
  position: absolute;
  top: -16.5px;
  left: 0;
  transform: translate( -190px, 0 );
  width: 53.660983%;
  height: auto;
}
.sec02__smallsection2__textbox {
  width: 60.481444%;
  height: auto;
  margin: 0 0 0 auto;
}
.sec02__smallsection2 .section__text {
  margin-top: 27px;
}

@media screen and (max-width: 1300px){
  .sec02__smallsection2__img {
    transform: translate( -120px, 0);
    width: 47%;
    min-width: 390px;
  }
}

@media screen and (max-width: 640px){
  #sec02 {
    padding-top: 49px;
  }
  .sec02__smallsection1 {
    margin-top: 15px;
  }
  .sec02__smallsection1 .section__text {
    margin-top: 15px;
  }
  .sec02__smallsection1 .section__smalltext {
    margin-top: 14px;
  }
  .sec02__smallsection2 {
    margin-top: 29px;
  }
  .sec02__smallsection2__img {
    position: relative;
    top: 0;
    transform: initial;
    width: 100%;
    min-width: initial;
  }
  .sec02__smallsection2__textbox {
    width: 100%;
    margin: 30px auto 0;
  }
  .sec02__smallsection2 .section__text {
    margin-top: 11.5px;
  }
}

/*----------- sec03 -----------*/

#sec03 {
  padding-top: 92.5px;
}
.sec03__smallsection1 {
  margin-top: 34.5px;
}
.sec03__smallsection1 .section__text {
  margin-top: 26px;
}
.sec03__smallsection1__img {
  margin-top: 39.5px;
}
.sec03__smallsection2 {
  position: relative;
  margin-top: 85.5px;
}
.sec03__smallsection2__textbox {
  width: 62.68806%;
  margin: 26px auto 0 0;
}
.sec03__smallsection2__img {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate( 200px, 57.3px );
  width: 53.66098%;
  height: auto;
}

@media screen and (max-width: 1300px){
  .sec03__smallsection2__textbox {
    width: 59%;
  }
  .sec03__smallsection2__img {
    transform: translate( 120px, 55px);
    width: 45%;
    min-width: 420px;
  }
}

@media screen and (max-width: 1150px){
  .sec03__smallsection2__img {
    transform: translate( 120px, 80px);
  }
}

@media screen and (max-width: 640px){
  #sec03 {
    padding-top: 49px;
  }
  #sec03 .section__title {
    font-size: 16px;
    line-height: 1.5;
  }
  .sec03__smallsection1 {
    margin-top: 17px;
  }
  .sec03__smallsection1 .section__text {
    margin-top: 11px;
  }
  .sec03__smallsection1__img {
    transform: translateX(-24px);
    width: calc( 100% + 48px);
    margin-top: 31px;
  }
  .sec03__smallsection2 {
    margin-top: 31.5px;
  }
  .sec03__smallsection2__textbox {
    width: 100%;
    margin: 17px auto 0;
  }
  .sec03__smallsection2__img {
    position: relative;
    transform: initial;
    width: 100%;
    min-width: initial;
    margin: 32.5px auto 0;
  }
}

/*----------- sec04 -----------*/

#sec04 {
  padding-top: 158.5px;
}
.sec04__smallsection1 {
  margin-top: 33.5px;
}
.sec04__smallsection1 .section__text {
  margin-top: 22px;
}
.sec04__smallsection2 {
  position: relative;
  margin-top: 103px;
}
.sec04__smallsection2__textbox {
  width: 58.57573%;
  margin: 0 0 0 auto;
}
.sec04__smallsection2 .section__text {
  margin-top: 27px;
}
.sec04__smallsection2__img1 {
  position: absolute;
  top: -4.5px;
  left: 0;
  transform: translate( -330px, 0 );
  width: 70.11033%;
  height: auto;
}
.sec04__smallsection2__img2 {
  width: 100%;
  height: auto;
  margin: 45px auto 0;
}

@media screen and (max-width: 1300px){
  .sec04__smallsection2__textbox {
    width: 50%;
  }
  .sec04__smallsection2__img1 {
    transform: translate( -120px, 0 );
    width: 56%;
    min-width: 440px;
  }
}

@media screen and (max-width: 640px){
  #sec04 {
    padding-top: 43.5px;
  }
  #sec04 .section__title {
    font-size: 16px;
    line-height: 1.5;
  }
  .sec04__smallsection1 {
    margin-top: 17px;
  }
  .sec04__smallsection1 .section__text {
    margin-top: 17.5px;
  }
  .sec04__smallsection2 {
    margin-top: 26px;
  }
  .sec04__smallsection2__textbox {
    width: 100%;
    margin: 25px auto 0;
  }
  .sec04__smallsection2 .section__text {
    margin-top: 15px;
  }
  .sec04__smallsection2__img1 {
    position: relative;
    top: 0;
    transform: translateX(-36px);
    width: calc( 100% + 36px );
    min-width: initial;
  }
  .sec04__smallsection2__img2 {
    transform: translateX(36px);
    width: 80.85809%;
    margin: 11px 0 0 auto;
  }
}

/*----------- sec05 -----------*/

#sec05 {
  padding-top: 87px;
}
.sec05__smallsection1 {
  margin-top: 35.5px;
}
.sec05__smallsection1 .section__text {
  margin-top: 22px;
}
.sec05__smallsection1 .section__smalltext {
  margin-top: 32px;
}
.sec05__smallsection2 {
  margin-top: 89px;
}
.sec05__smallsection2__textbox {
  width: 100%;
  margin: 0 auto;
}
.sec05__smallsection2 .section__text {
  margin-top: 27px;
}
.sec05__smallsection2__img {
  width: 71.26379%;
  height: auto;
  margin: 72.5px auto 0 12.43731%;
}

@media screen and (max-width: 640px){
  #sec05 {
    padding-top: 59px;
  }
  .sec05__smallsection1 {
    margin-top: 15.5px;
  }
  .sec05__smallsection1 .section__text {
    margin-top: 20px;
  }
  .sec05__smallsection1 .section__smalltext {
    margin-top: 32px;
  }
  .sec05__smallsection2 {
    margin-top: 35px;
  }
  .sec05__smallsection2 .section__text {
    margin-top: 14px;
  }
  .sec05__smallsection2__img {
    transform: translateX(-14.5px);
    width: calc( 100% + 29px );
    margin: 13.5px auto 0;
  }
}