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

/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video, a):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/

*{box-sizing: border-box;}
    a {
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  text-decoration: none;
}

:root {
--fontColor:#222222;
--primaryColor:#FFE9A9;
--secondaryColor:#FFEC00;
--bgColor:#F3F3F3;
--redColor:#DC000C;
--whiteColor:#fff;
--shadowColor:rgba(0, 0, 0, 0.3);
}

#about_setteikomikomi {overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-style: normal;line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: normal !important;line-height: 1.8;color: var(--fontColor);max-width: 1650px;margin: auto;font-feature-settings: "palt";background: var(--bgColor);position: relative;}

    section{position: relative;}
    .line_center {text-align: center;}
    img {width: auto;max-width: 100%;}
    .sec-inner {position: relative;max-width: 1412px; width: 90%; margin:auto;container-type: inline-size;}
#about_setteikomikomi #lpheader {position: relative;}
#about_setteikomikomi .lpheader-txt {position: absolute;width: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);}

#about_setteikomikomi h1 {font-size:clamp(26px, 3.7vw, 100px);color: #fff;text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);margin: 0;line-height: 1.5;font-weight: 500;margin-bottom: 6%;}
#about_setteikomikomi .logo{width: 20%; margin: auto auto 5%;}

#about_setteikomikomi .hh2{font-size:  clamp(21px, 2.8vw, 46px);border-bottom: 3px solid var(--secondaryColor);display: inline-block;line-height: 1.3;margin-bottom: 6%;}
#about_setteikomikomi #sec02 {padding: 3% 0 5%;background-image: url("feature_about_setteikomikomi/comicomi-img.png?$staticlink$");background-repeat: no-repeat;background-position: 96% 11%;background-size: 37%;}
#about_setteikomikomi .comicomiBox{container-type: inline-size;position: relative;width: 55%;text-align: left;margin-bottom: 5%;}
#about_setteikomikomi .comicomiSum{font-size: clamp(16px, 1.4vw, 22px);line-height: 2;}
#about_setteikomikomi .comiContentBox{position: relative;text-align: center;}
#about_setteikomikomi .comiContentTitle{font-size: clamp(18px, 1.9vw, 30px);font-weight: bold;border: 2px solid #707070;background: #fff;text-align: center;border-radius: 10px;display: inline-block;padding: 0.2em 1em;position: relative;top: 1.1em;}
#about_setteikomikomi .comiContent{font-size: clampclamp(15px, 1.25vw, 20px);border: 1px solid #707070;background: #fff;border-radius: 10px;padding: 3em 1.5em 1.5em;text-align: left;}
#about_setteikomikomi .hh3{font-size: clamp(28px, 2.75vw, 44px);line-height: 1.3;font-weight: bold;text-align: left;}
#about_setteikomikomi #sec03{margin: 0 auto 10%;}
#about_setteikomikomi .btnArea{text-align: center;}
#about_setteikomikomi .about_settingBtn {display: inline-block; padding: 1em;background: var(--primaryColor);color:var(--fontColor); font-size: clamp(19px, 1.75vw, 28px);font-weight: 500;box-shadow: 0 5px 5px var(--shadowColor);border: solid 1px #707070;transition: all .5s;}
#about_setteikomikomi .lastIllust {position: absolute;left: 0%;bottom: -30%;width: 25%;}

#about_setteikomikomi .ul-flow {display: flex;list-style: none;justify-content: center;margin: 4em 0;padding: 0;align-items: center;}
#about_setteikomikomi .ul-flow li:nth-of-type(1),.ul-flow li:nth-child(3),.ul-flow li:nth-child(5),.ul-flow li:nth-child(7) {background-color: #1d1d1f;color: #efff2d; font-size: clamp(19px, 1.6vw, 28px); padding: 0.5em 0.5em 0.3em; text-align: center;line-height: 1.7;flex-basis: 22%;}
#about_setteikomikomi .ul-flow li:nth-child(2), .ul-flow li:nth-child(4), .ul-flow li:nth-child(6) {font-size: 30px;flex-basis: 4%;}
#about_setteikomikomi .accbox {margin: 2em 0;padding: 0; }
#about_setteikomikomi .accbox label {display: block; margin: 1.5px 0; padding : 0.5em;color: #000;font-weight: bold;background: var(--primaryColor);transition: all 0.5s;font-size: 26px; border: 1px solid #dedede;text-align: center; }
#about_setteikomikomi .accbox .accshow {height: 0; padding: 0;overflow: hidden;opacity: 0;transition: 0.8s; padding: 1em;}
#about_setteikomikomi .cssacc + label + .accshow {height: auto;background: #fff;opacity: 1;border: 1px solid #dedede; }
#about_setteikomikomi .accbox .accshow p {margin: 15px 10px;font-size: 16px;line-height: 1.7;}

#about_setteikomikomi .komikomi-sum {margin: 4em;position: relative;border: 1px solid #303032; padding: 0.8em 1em 2em;border-radius: 10px;text-align: center;}
#about_setteikomikomi .div-flex {display: flex;justify-content: space-around;text-align: left;font-size: 16px;}
#about_setteikomikomi .div-flex > div {flex-basis: 46%;}
#about_setteikomikomi h5 {font-size: 22px; color: #000; background: #fff;display: inline-block;position: relative;margin: 0;top: -1.5em;font-weight: 500;margin: 0 0.8em;}



#about_setteikomikomi .sp-cam {display: none !important;}
#about_setteikomikomi .pad-cam {display: none !important;}
#about_setteikomikomi .pc-cam {display: block;}

#about_setteikomikomi .flowS{display: block;border-top: 1px solid #fff;font-size: 70%;color: #FFF;}
#about_setteikomikomi .flowNotice{font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);background: #fff;border: 1px solid #c90000;display: inline-block;padding: 0.5em 1.5em;line-height: 2;margin-bottom: 3%;}
#about_setteikomikomi #label1{display: none;}


    
/************************************************************/@media screen and (max-width: 820px) {
#about_setteikomikomi .ul-flow{flex-wrap: wrap;justify-content: flex-end;margin-bottom: 2%;}
#about_setteikomikomi .ul-flow li:nth-child(2), .ul-flow li:nth-child(4),.ul-flow li:nth-child(6) {font-size: 20px;flex-basis: 5%;}
#about_setteikomikomi .ul-flow li:nth-of-type(1), .ul-flow li:nth-child(3), .ul-flow li:nth-child(5), .ul-flow li:nth-child(7) {flex-basis: 44%;margin-bottom: 5%;}
#about_setteikomikomi .accbox label {font-size: 20px;}
#about_setteikomikomi .logo{width: 25%;margin-bottom: 5%;}
  
#about_setteikomikomi .pad-cam {display: block !important;}
#about_setteikomikomi .pc-cam {display: none !important;}
#about_setteikomikomi .sp-cam {display: none !important;}
}
    
/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block;}
}

/************************************************************/@media screen and (max-width: 700px) {
#about_setteikomikomi .logo{width: 40%;margin-bottom: 0;}
  #about_setteikomikomi h1 {margin-bottom: 3%;}
  #about_setteikomikomi .comicomiSum{line-height: 1.6;}
  #about_setteikomikomi .accbox .accshow p{margin: 0;text-align: left;}
  #about_setteikomikomi .komikomi-sum{margin: 3em 0.5em 1.5em;}
  #about_setteikomikomi h5{line-height: 1.2;top: -1.2em;}
  #about_setteikomikomi .lastIllust{bottom: 94%;width: 36%;}
  #about_setteikomikomi .div-flex{flex-direction: column;}
  #about_setteikomikomi .about_settingBtn{padding: 0.7em;}
#about_setteikomikomi .comicomiBox{width: 100%;margin-bottom: 95%;}
#about_setteikomikomi #sec02{background-size: 80%;background-position: 53% 17%;}
#about_setteikomikomi .ul-flow li:nth-of-type(1), .ul-flow li:nth-child(3), .ul-flow li:nth-child(5), .ul-flow li:nth-child(7) {flex-basis: 85%;}
#about_setteikomikomi .ul-flow{flex-wrap: wrap;margin: 2em 0;justify-content: center;}
#about_setteikomikomi .ul-flow li:nth-child(2), .ul-flow li:nth-child(4), .ul-flow li:nth-child(6) {transform: rotate(90deg);flex-basis: 85%;}

#about_setteikomikomi .pc-cam {display: none !important;}
#about_setteikomikomi .pad-cam {display: none !important;}
#about_setteikomikomi .pc-pad {display: none;}
#about_setteikomikomi .sp-cam {display: block!important;}

}