/* ==========================================================================
 * Spacing
 * ========================================================================== */
.margin-none  {margin:           0px !important;}
.padding-none {padding:          0px !important;}

.margin-T0    {margin-top:       0px !important;}
.margin-T5    {margin-top:       5px !important;}
.margin-T10   {margin-top:      10px !important;}
.margin-T15   {margin-top:      15px !important;}
.margin-T20   {margin-top:      20px !important;}
.margin-T25   {margin-top:      25px !important;}
.margin-T30   {margin-top:      30px !important;}
.margin-T35   {margin-top:      35px !important;}
.margin-T40   {margin-top:      40px !important;}
.margin-T45   {margin-top:      45px !important;}
.margin-T50   {margin-top:      50px !important;}
.margin-T60   {margin-top:      60px !important;}
.margin-T70   {margin-top:      70px !important;}
.margin-T80   {margin-top:      80px !important;}
.margin-T90   {margin-top:      90px !important;}
.margin-T100  {margin-top:     100px !important;}

.margin-R0    {margin-right:     0px !important;}
.margin-R5    {margin-right:     5px !important;}
.margin-R10   {margin-right:    10px !important;}
.margin-R15   {margin-right:    15px !important;}
.margin-R20   {margin-right:    20px !important;}

.margin-B0    {margin-bottom:    0px !important;}
.margin-B5    {margin-bottom:    5px !important;}
.margin-B10   {margin-bottom:   10px !important;}
.margin-B15   {margin-bottom:   15px !important;}
.margin-B20   {margin-bottom:   20px !important;}

.margin-L0    {margin-left:      0px !important;}
.margin-L5    {margin-left:      5px !important;}
.margin-L10   {margin-left:     10px !important;}
.margin-L15   {margin-left:     15px !important;}
.margin-L20   {margin-left:     20px !important;}

.padding-T0   {padding-top:      0px !important;}
.padding-T5   {padding-top:      5px !important;}
.padding-T10  {padding-top:     10px !important;}
.padding-T15  {padding-top:     15px !important;}
.padding-T20  {padding-top:     20px !important;}
.padding-T25  {padding-top:     25px !important;}
.padding-T30  {padding-top:     30px !important;}
.padding-T35  {padding-top:     35px !important;}
.padding-T40  {padding-top:     40px !important;}
.padding-T45  {padding-top:     45px !important;}
.padding-T50  {padding-top:     50px !important;}
.padding-T60  {padding-top:     60px !important;}
.padding-T70  {padding-top:     70px !important;}
.padding-T80  {padding-top:     80px !important;}
.padding-T90  {padding-top:     90px !important;}
.padding-T100 {padding-top:    100px !important;}

.padding-R0   {padding-right:    0px !important;}
.padding-R5   {padding-right:    5px !important;}
.padding-R10  {padding-right:   10px !important;}
.padding-R15  {padding-right:   15px !important;}
.padding-R20  {padding-right:   20px !important;}

.padding-B0   {padding-bottom:   0px !important;}
.padding-B5   {padding-bottom:   5px !important;}
.padding-B10  {padding-bottom:  10px !important;}
.padding-B15  {padding-bottom:  15px !important;}
.padding-B20  {padding-bottom:  20px !important;}

.padding-L0   {padding-left:     0px !important;}
.padding-L5   {padding-left:     5px !important;}
.padding-L10  {padding-left:    10px !important;}
.padding-L15  {padding-left:    15px !important;}
.padding-L20  {padding-left:    20px !important;}


/* ==========================================================================
 * guideline
 * ========================================================================== */
.guideline {
  margin-bottom: 30px;
  background: #fff;
  width: 100%;
  display: grid;
  gap: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.guideline p {
  font-size: 18px;
  margin-bottom: 1.2em;
}

.guideline_img-wrap {
  width: 80%;
  margin: 40px auto;
}

@media screen and (max-width: 500px) {
  .guideline_img-wrap {
    width: 100%;
  }
}

.guideline_img-wrap img {
  width: 100%;
}

.guideline_img-wrap video {
  width: 100%;
}

.guideline_btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.guideline_btn-wrap .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 550px;
  padding: 24px 4%;
  background-color: #ff811d;
  /* background: linear-gradient(to bottom, #ffc778 50%, #fb9e14 100%); */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 500px) {
  .guideline_btn-wrap .btn {
    width: 100%;
  }
}

.guideline_btn-wrap .btn.official {
  background-color: #F53738;
  /* background: linear-gradient(to bottom, #ff7878 50%, #fb1414 100%); */
}

.guideline_btn-wrap img {
  width: 100%;
  max-width: 550px;
}

.guideline_bg-wrap {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 20px 40px;
  background: #ffeade;
  border-radius: 20px;
}

@media screen and (max-width: 500px) {
  .guideline_bg-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px;
  }
}

.guideline ol.num {
  display: grid;
  gap: 10px;
  font-size: 20px;
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 20px;
  counter-reset: num;
  margin-bottom: 20px;
}

.guideline ul.dot {
  display: grid;
  gap: 10px;
  font-size: 20px;
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 20px;
  margin-bottom: 20px;
}

.guideline_bg-wrap ol.num,
.guideline_bg-wrap ul.dot {
  margin-bottom: 0;
}

.guideline_index {
  padding: 20px 6%;
  background-color: #f5f5f5;
  border-radius: 15px;
}

.guideline_index-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.guideline_index-list {
  display: grid;
  gap: 8px;
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 20px;
}

.guideline_index-item a {
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
}

.guideline_contents-wrap {
  width: 100%;
}

.guideline_contents-wrap-inner {
  width: 100%;
  padding: 0 6%;
}

.guideline_contents-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 50px;
  padding: 10px 15px;
  background-color: #00afcc;
  color: #fff;
}

.guideline_sub-items {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

.guideline_sub-item-title {
  font-size: 24px;
  font-weight: bold;
  color: #00afcc;
  padding-bottom: 5px;
  border-bottom: 2px solid #00afcc;
  margin-bottom: 10px;
}

/* utility */
span.bold {
  font-weight: bold;
}

span.red {
  color: #ff0000;
}

span.blue {
  color: #002bff;
}

span.marker {
  padding-bottom: 2px;
  background: linear-gradient(transparent 50%, #faf29c 0%);
}

span.inline-block {
  display: inline-block;
}

span.indent {
  padding-left: 1em;
}

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

.margin-top-0 {
  margin-top: 0 !important;
}

.padding-top-0 {
  padding-top: 0 !important;
}

/* 注釈用 */
.asterisk {
  font-size: 0.7em;
  vertical-align: top;
}

.cmt {
  margin: 15px 12px 0;
}

.cmt p {
  font-size: clamp(10px, 0.6em, 14px);
  color: #1a1a1a;
  margin: 0 !important;
}

.guideline-anchor {
  padding-bottom: 36px;
}


.guideline.typeb{

}
.guideline.typeb .point-wrap{
  background-color: #f4eee1;
  box-sizing: border-box;
  padding: 0px 35px;
  padding-bottom: 35px;
  margin-top: 95px;
}
.guideline.typeb .point-wrap .title{
  width: fit-content;
  max-width: 80%;
  position: relative;
  top: -35px;
  margin-bottom: 15px;
}
.guideline.typeb .point-wrap .title .logo{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 30%;
  margin-bottom: 25px;
}
.guideline.typeb .point-wrap .point-sub-title{
  text-align: center;
  font-size: 24px;
  color: #10b97b;
  border-top: 2px solid #10b97b;
  border-bottom: 2px solid #10b97b;
  box-sizing: border-box;
  padding: 15px 0px;
  margin-bottom: 25px;
  font-weight: bold;
}
.guideline.guideline_top.typeb .guideline_bg-wrap{
  background-color: #ffffff;
}
.guideline.typeb ul.dot{
  font-size: 18px;
}

@media screen and (max-width: 750px) {
  .guideline.typeb .point-wrap .title{
    top: -5vw;
  }
  .guideline.typeb .point-wrap .title .logo{
    margin-bottom: 15px;
  }
  .guideline.typeb #guideline-anchor2{
    margin-top: -55px;
  }
}
@media screen and (max-width: 500px) {
  .guideline.typeb .point-wrap .point-sub-title{
    font-size: 5.25vw;
  }
  .guideline.typeb .point-wrap .title {
        top: -7vw;
        max-width: 100%;
    }
}


/* ==========================================================================
 * guideline typec専用
 * ========================================================================== */
.style-typec .txt-left {
	text-align: left;
}
.style-typec .txt-center {
	text-align: center !important;
}
.style-typec .txt-right {
	text-align: right;
}
.style-typec .txt-unbold {
	font-weight: normal;
}
.style-typec .txt-bold {
	font-weight: bold;
}
.style-typec .txt-emphasis {
	color: #e74c3c;
}
.style-typec .txt-notes {
	color: #7f8c8d;
}
.style-typec .pink {
	color: #e4415f;
}
.style-typec .yellow {
	color: #ffff8e;
}

.style-typec {
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
}
.style-typec .inner-width {
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}
 
.style-typec .photo {
	text-align: center;
}
.style-typec .txt {
	text-align: left;
	font-size: min(4.8vw, 24px);
	font-weight: 700;
	line-height: 1.6;
}
.style-typec .separator {
	margin-top: 40px;
	margin-bottom: 40px;
}
.style-typec strong {
	font-size: min(6vw, 32px);
	color: #e60000;
}
.style-typec .marker {
	background: #ff6;
	color: #e60000;
	font-weight: bold;
}
.style-typec small {
	font-size: 1rem;
	text-align: center;
}
.style-typec .annotation {
	display: inline;
}
/*-------------------- Back to Top --------------------*/
.style-typec a.backtotop {
	position: fixed;
	bottom: 80px;
	right: 1%;
	width: 40px;
	height: 40px;
	padding: 38px 0 0;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	opacity: .5;
	border-radius: 50%;
}
.style-typec a.backtotop::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #ffffff transparent;
}
.style-typec .focus__ct {
	position: relative;
}
.style-typec .focus__movie {
	position: absolute;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
}
.style-typec .sec-ttl {
	font-size: min(6vw, 32px);
    font-weight: bold;
    line-height: 1.6;
    color: #fff;
    background: #e74c3c;
    padding: 3.333vw 0;
    margin-bottom: 30px;
}
.style-typec .txt-M {
    font-size: min(6vw, 32px);
}
.style-typec .txt-orange {
    color: #e9460b;
}
.style-typec .ttl-line {
    border-top: 2px solid #e74c3c;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: .2em;
}
.style-typec .block {
    display: block;
    margin-top: -20px;
}
/* ==========================================================================
 * cta
 * ========================================================================== */
.style-typec .pulse {
  	margin: auto;
  	padding: 10px 20px;
  	cursor: pointer;
  	border-radius: 5px;
  	animation: pulseEffect 1s ease-in-out infinite;
}

@keyframes pulseEffect {
  0%, 100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1);
  }
}

.style-typec .investigation__video {
	position: relative;
}
.style-typec .investigation__graph {
	position: absolute;
    top: 38%;
    height: 36%;
    left: 0;
}

.style-typec .problem__box {
	margin-top: 40px;
}

.style-typec .btn {
	margin: 0 auto 20px auto;
	width: 80%;
}
.style-typec .btn a {
	width: 100%;
	background: #ff7a0e;
	text-align: center;
	color: #fff;
	display: block;
	padding: 5%;
	border-radius: 7px;
	text-decoration: none;
	transition: .5s;
	font-weight: 700;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
}
.style-typec .btn a:hover {
  transform: scale(1.1,1.1);
}
.style-typec .list-11 {
    list-style-type: disc;
    padding: 1em 1em 1em 2.5em;
    border-left: 5px solid #2589d0;
    background-color: #E5F2FF;
	border-radius: 5px;
    font-size: 15px;
}

.style-typec .list-11 li {
    padding: .3em .3em .3em 0;
}

.style-typec .list-11 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}