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

/*********************************************************/
/* CSS file For Hunglead, Inc. */
/* FileName: trial_style.css */
/* data: 2025/10/22*/
/* index: */
/* 	1 for SmartPhone */
/* 	2 for Tablet */
/* 	3 for PC */
/*********************************************************/

:root {
 --100vw: 100vw;
 --window-width: tan(atan2(var(--100vw),1px));
 --container-width: min(90vw,1000px);
 --main-width: min(90vw,1200px);
 --itv-width: min(90vw,800px);
 --page-width: min(90vw,800px);
 --font-size: clamp(1.4rem,1.2vw,1.6rem);
 --font-size-s: clamp(1.2rem,1vw,1.4rem);
 --font-size-ss: clamp(1rem,.8vw,1.2rem);
 --font-size-l: clamp(1.8rem,1.8vw,2rem);
 --boss-color: #ff3b3b;
 --boss-bgcolor: #f5f0ef;
}

* {
 box-sizing: border-box
}

img {
 height: auto;
 width: 100%
}

a {
 outline: 0;
 cursor: pointer;
 text-decoration: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 transition: all .3s ease-out
}

a:hover {
 opacity: .7
}

html {
 font-size: 62.5%;
 height: 100%
}

body {
 background: #fff;
 font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','游ゴシック','Yu Gothic','ＭＳ Ｐゴシック',sans-serif;
 font-size: var(--font-size);
 line-height: 1.8;
 color: #333;
 word-break:break-all;
 overflow-wrap: anywhere
}

h1 {
 font-size: clamp(2.4rem,2.4vw,4rem);
 font-weight: 700;
 line-height: 1.4
}

h2 {
 font-weight: 700;
 font-size: clamp(2rem,2vw,3rem);
 line-height: 1.6
}

h3 {
 font-weight: 700;
 font-size: clamp(1.8rem,1.8vw,2rem);
 line-height: 1.6
}


/* ------------------------------------------------------- */
/* ===== for SmartPhone ===== */
/* ------------------------------------------------------- */
.dis-pc {
 display: none;
}

.dis-sp {
 display: block;
}

.cw {
 width: var(--container-width);
 margin: 0 auto;
 }

.bgcolor {
 background: var(--boss-bgcolor);
}

h1 {
 padding: 4rem 0;
 text-align: center;
 }
 
 h1 img {
 display: block;
 width: 100px;
 margin: 0 auto 1rem;
}
 
#catch {
 margin: 0 auto;
 max-width: fit-content;
}

 
#about.dis-sp {
 padding: 2rem 0;
}

#about.dis-sp ul {
 padding: 20px;
 background: #fff;
 margin: 0 auto;
 width: fit-content;
 box-sizing: border-box;
 border-radius: 10px
}

#about.dis-sp li {
 position: relative;
 line-height: 2
}

#about.dis-sp li::before {
 content: "";
 background-repeat: no-repeat;
 display: inline-block;
 width: 24px;
 height: 24px;
 position: relative;
 top: 0;
 vertical-align: middle;
 margin: 0 10px 0 0
}

#about.dis-sp li:first-of-type::before {
 background-image: url(../images/trial/icon_pc.svg)
}

#about.dis-sp li:nth-of-type(2)::before {
 background-image: url(../images/trial/icon_support.svg)
}

#about.dis-sp li:nth-of-type(3)::before {
 background-image: url(../images/trial/icon_yen.svg)
}

#about.dis-sp li:nth-of-type(4)::before {
 background-image: url(../images/trial/icon_cloud.svg)
}



#process {
 padding: 3rem 0;
}

#process h2 {
 text-align: center;
}

#process ul {
 margin: 0 auto;
 width: 90%;
 max-width: fit-content;
}

#process li {
 background: #fff;
 border:#e3e0df 2px solid;
 border-radius: 10px;
 padding: 3rem 2rem 2rem;
 position: relative;
 margin: 2rem auto 0;
}

#process .step {
 line-height: 2;
 width: 2em;
 height: 2em;
 text-align: center;
 color: #fff;
 background: var(--boss-color);
 margin: 0 auto 10px;
 display: block;
 border-radius: 100vh;
 position: absolute;
 top: -1.4rem;
 left: 0;
 right: 0;
}

#process .step::before {
 content: "";
 border: solid transparent;
 border-width: 7px;
 border-top-color: var(--boss-color);
 position: absolute;
 top: calc(100% - 2px);
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}


#process .company1 {
 background: var(--boss-color);
 color: #fff;
 border:#fff 1px solid;
 text-align: center
}

#process .company2 {
 background: #fff;
 border:var(--boss-color) 1px solid;
 color: var(--boss-color);
 text-align: center
}

#process .flow {
 margin: 1rem auto 0;
 font-size: var(--font-size-s)
}

#webapi {
/* padding: 3rem 0;*/
}

.accordion_summary {
 display: block;
 background: #e3e0df;
 color: #333;
/* border: #999292 1px solid;*/
 position: relative;
 list-style: none;
 cursor: pointer;
 padding: 15px 10px;
 width: 80%;
 max-width: 400px;
 margin: 1rem auto;
 text-align: center;
 font-size: var(--font-size);
 border-radius: 50px;
/* box-shadow: 0 4px rgb(0 0 0 / 20%);*/
 transition: all .3s ease-out
}

.accordion_summary:hover {
 opacity: .7
}

.accordion_summary::-webkit-details-marker {
 display: none;
}
.accordion_summary::after {
 content: "+";
 font-size:var(--font-size-l);
 position: absolute;
 right: 20px;
 top: 50%;
 transform: translateY(-50%);
}
.accordion[open] .accordion_summary::after {
 content: "−";
}

#webapi ul p:first-of-type {
 text-align: center;
 margin: 2rem auto;
 font-weight: bold;
}


#webapi ul p:first-of-type::before {
 content: "▼";
}


#webapi li {
 margin-bottom: 3rem;
}

#webapi img {
 margin: 2rem auto 0;
}

.app-btn {
 padding: 4rem 0;
 background: #c00;
 margin: 4rem auto 0;
}

.app-btn a {
 display: block;
 text-align: center;
 background: #fff;
 padding: 15px 0;
 color: #c00;
 font-size: var(--font-size-l);
 border-radius: 50px;
 margin: 0 auto;
 max-width: 500px;
 width: 90%;
 box-shadow: 0 4px rgb(0 0 0 / 20%);
}

.app-btn a:hover {
 opacity: .7
}


footer {
 background: var(--boss-bgcolor);
 padding: 40px 6vw
}

.foot-cont {
 padding: 20px 0 0
}

.foot-cont p {
 font-size: 1.2rem;
 margin: 0 0 10px
}

.foot-cont h2 {
 border-bottom: 1px dotted #c2c2c2;
 font-size: 1.6rem;
 font-weight: 700;
 padding: 0 0 5px;
 margin: 0 0 15px;
 text-align: left
}

.foot-cont .icon-list li {
 font-size: 1.4rem;
 padding: 5px 0
}

.foot-cont .foot-logo img {
 width: 120px
}

.foot-cont .foot-logo2 img {
 width: 210px
}

#copy {
 background: var(--boss-bgcolor);
 font-size: var(--font-size-s);
 text-align: center;
 padding: 10px 0
}


/* ------------------------------------------------------- */
/* ===== for Tablet 768 ===== */
/* ------------------------------------------------------- */
@media (768px <= width) {
 h1 img {
 display: inline-block;
 width: 150px;
 vertical-align: middle;
 margin: 0 2rem 0 0;
}

#catch {
 text-align: center;
}

#process h2 {
 margin: 4rem auto;
}

#process ul {
 display: flex;
 }
 
#process li {
 width: 30%;
 }
 
#process li:not(:last-child) {
 position: relative;
}

#process li:not(:last-child)::before {
 content: "";
 width: 14px;
 height: 14px;
 margin-right: 10px;
 display: inline-block;
 border-top: 4px solid var(--boss-color);
 border-right: 4px solid var(--boss-color);
 position: absolute;
 top: calc(50% - 14px);
 right: -28px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}


footer section {
 display: flex;
 margin: 0 auto;
 max-width: 1000px;
 gap:0 2rem;
}

footer section .foot-cont {
 flex: 1
}
 
 
 }
 
 
 /* ------------------------------------------------------- */
/* ===== for pc 1000 ===== */
/* ------------------------------------------------------- */
 @media (1000px <= width) {
 
.dis-pc {
 display: block;
}

.dis-sp {
 display: none;
}

#about.dis-pc {
 display: flex!important;
 flex-wrap: wrap;
 justify-content: space-between;
 padding: 3rem 0;
 }

#about.dis-pc div {
 background: #fff;
 border-radius: 10px;
 text-align: center;
 width: 24%;
 padding: 2rem;
 box-sizing: border-box;
 }

#about.dis-pc h2 {
 border-bottom: var(--boss-color) 2px solid;
 padding: 0 0 4px;
 font-size: clamp(14px,1vw,15px);
 }

#about.dis-pc img {
 width: 100%;
 max-width: 120px;
 margin: 20px auto
 }

#about.dis-pc p {
 font-size: var(--font-size-s);
 text-align: left
 }

#about.dis-pc p span {
 display: inline-block;
 margin-top: 10px
 }
 
#webapi ul {
 display: flex;
 column-gap: 6rem;
}

#webapi li {
  margin: 0;
 }
 
 
 }