@charset "utf-8";
/**************************************************************/
/* CSS file For Hunglead, Inc.                                */
/* FileName: basic_style.css                                  */
/* data: 2026/02/24                                           */
/* index:                                                     */
/*   1 Basic Style                                            */
/*   1 for SmartPhone                                         */
/*   2 for Tablet                                             */
/*   3 for PC                                                 */
/**************************************************************/


/* ------------------------------------------------------- */
/* ===== Basic Style ===== */
/* ------------------------------------------------------- */


/* ------------------------------------------------------- */
/* ===== for SmartPhone ===== */
/* ------------------------------------------------------- */
h1{
 text-align: center;
}

h2 {
 font-size: var(--font-size-l);
}


#questionnaire {
 width: 90%;
 max-width: fit-content;
 margin: 30px auto 0;
 padding: 24px;
 box-sizing: border-box;
 background: #fff;
 border-radius: 16px;
 color: #333;
}

#questionnaire h2 {
 margin-bottom: 10px;
 text-align: center;
 font-size: var(--font-size);
}

#questionnaire a {
 background: #1d4892;
 color: #fff;
 text-align: center;
 padding: 10px 20px;
 max-width: fit-content;
 margin: 10px auto 0;
 display: block;
 border-radius: 40px;
}

#questionnaire a:hover {
 background: #ffbf00;
 color: #333;
}

#questionnaire p {
 font-size: var(--font-size-s);
}

#mat-list {
 box-sizing: border-box;
 display: block;
 max-width: 1000px;
 margin: 0 auto;
 padding: 30px 15px 0;
 width: 100%;
}

#mat-list > div,
#demo-list > div {
 margin-bottom: 50px;
 position: relative;
}

.mat-pdf a {
 color: #333;
 text-decoration: none;
}

.mat-pdf .title {
 font-size: var(--font-size);
 font-weight: bold;
 margin: 1rem 0;
 text-align: left;
}

.btn-dl {
 display: inline-block;
 text-align: center;
 border-radius: 6px;
 box-sizing: border-box;
 background: #1d4892;
 color: #fff;
 padding: 14px;
 margin: 10px auto;
 border: 1px solid #1d4982;
 width: 100%;
 position: relative;
 text-decoration: none;
 transition: color .3s ease-out, background .3s ease-out;
}

.btn-dl::after {
 position: absolute;
 top: 50%;
 right: 4%;
 content: '';
 margin-top: -5px;
 border: 7px solid transparent;
 border-top-width: 5px;
 border-bottom-width: 5px;
 border-left-color: #fff;
 transition: all .2s
}

.mat-pdf:hover .btn-dl {
 background-color: #fc0!important;
 color: #333!important
}

.mat-pdf:hover .btn-dl::after {
 border-left-color: #333
}

.txt-c {
text-align: center;
}

#demo-area {
 background: #f8f8f8;
}

#demo-area h2 span {
background:linear-gradient(transparent 60%, #ff6 60%);
}

.demo-ftr {
 font-weight: bold;
}

.demo-ftr::before {
 content: "";
 display: inline-block;
 height: 22px;
 width: 22px;
 background: url(../../images/common/icon_check_blue.svg) no-repeat left center / 22px 22px;
 vertical-align: middle;
 margin: 0 0.5rem 0 0;
}

#demo-list {
 box-sizing: border-box;
 display: block;
 max-width: 1000px;
 margin: 0 auto;
 padding: 30px 15px 0;
 width: 100%;
}

#demo-area-demo {
 width: 295px;
 height: 267px;
 position: relative;
 margin: 2rem auto 0;
}


#demo-pcimage {
 position: absolute;
 top: 34%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 273px;
 height: 163px;
 z-index: 1;
 background: #fff;
 overflow: hidden
}

#demo-area-demo > img {
 position: relative;
 z-index: 2;
display: block
}

#demo-pcimage img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: ChangeImage 9s infinite;
 opacity: 0
}

@keyframes ChangeImage {
0% {
opacity: 0
}

20% {
opacity: 1
}

33% {
opacity: 1
}

63% {
opacity: 0
}

100% {
opacity: 0
}
}

#demo-pcimage img:nth-of-type(1) {
 animation-delay: 0s
}

#demo-pcimage img:nth-of-type(2) {
 animation-delay: 3s
}

#demo-pcimage img:nth-of-type(3) {
 animation-delay: 6s
}



/* ------------------------------------------------------- */
/* ===== for PC 768 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 768px){

.catch {
 text-align: center;
 margin: auto;
}


#mat-list {
 display: flex;
 justify-content: left;
 flex-wrap: wrap;
 padding: 0 10px 0;
 width: 100%;
}

#mat-list > div {
 width: 50%;
 box-sizing: border-box;
 padding: 0 15px;
 margin-bottom:0;
}


#demo-list {
 display: flex;
 justify-content: left;
 flex-wrap: wrap;
 padding: 40px 10px 0;
 width: 100%;
}

#demo-list > div {
 width: 33%;
 box-sizing: border-box;
 padding: 0 30px;
 margin-bottom: 60px;
}


.link-demo::before {
 content: "＼デモ動画はこちらから／";
 display: block;
 margin: 0 auto 1rem;
 text-align: center;
}




/* ------------------------------------------------------- */
/* ===== for PC 1000 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 1000px){

#mat-list > div {
 width: 33%;
}




}