@charset "UTF-8";
:root {
 --main-color: #f05b10;
 --main-color-sub: #fdd65f;
 --main-dark: #002f6c;
 --main-light: #fff3a0;
}
/*============================================================*/
/*　ナビゲーション */
.main-navi.fixed {
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 1000;
 background-color: #fff;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--main-color) 60%, transparent);
}
.main-navi .pad {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: center;
 justify-content: center;
 align-items: center;
 padding: 10px 20px;
 gap: 20px;
}
.main-navi__image {
 margin-right: 10px;
}
.main-navi .links {
 display: -webkit-flex;
 display: flex;
 gap: 20px;
 justify-content: flex-end;
}
.main-navi .links > li a {
 text-decoration: none;
 font-size: 1.2em;
 color: var(--main-dark);
 font-weight: bold;
 white-space: nowrap;
}
.main-navi .anc_button {
 font-size: 1em;
 padding: .65em 2.2125em .7em 1.2em;
}
.main-navi .anc_button+.anc_button {
    margin-left: 0.3em;
}
@media only screen and (max-width: 1000px) {
.main-navi .pad {
  flex-wrap: wrap;
 gap: 10px;
}
.main-navi .links {
 gap: 15px;
}
.main-navi .links > li a {
 font-size: 1em;
}
.main-navi__image{
width: 170px;
}
}
@media only screen and (max-width: 760px) {
.main-navi .anc_button {
 font-size: .9em;
 padding: .5em 1.8em .4em 1.0em;
}
.main-navi .anc_button::before {
top: 1.10em;
    right: 10px;
}
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
 display: block !important;
}
.sp {
 display: none !important;
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
 .pc {
  display: none !important;
 }
 .sp {
  display: block !important;
 }
}
.pad {
 margin: auto;
 padding: 60px 20px;
 max-width: 1260px;
}
/*　section-title */
.section-title {
 text-align: center;
}
.section-title h2 {
 display: inline-flex;
 align-items: center;
 font-weight: bold;
 font-size: 1.5em;
 background: #fff;
 border: 2px solid var(--main-dark);
 border-radius: 8px;
 overflow: hidden;
}
.section-title h2 .label {/* 左の黒ラベル */
 background: var(--main-dark);
 color: #fff;
 padding: 6px 12px;
}
.section-title h2 .text {/* 右のテキスト */
 padding: 6px 16px;
 color: var(--main-dark);
}
.section-title .text_lede {
 font-size: 2em;
 font-weight: bold;
 margin-top: .8rem;
 color: #000;
}
.section-title .text_lede span {
 font-size: 1.1em;
 padding: 0 2px;
 margin: 0 5px;
 display: inline;
 background: linear-gradient(transparent 80%, var(--main-color-sub) 50%);
}
@media only screen and (max-width: 750px) {
.section-title h2 {
 font-size: 1em;
}
.section-title .text_lede {
 font-size: 1.3em;
}
}
/*　sub-title */
.sub-title {
 display: flex;
 align-items: center;
 margin-top: 2em;
 padding: .5em 1em;
 border-radius: .5em;
 color: #fff;
 background: var(--main-dark);
 font-size: 1.1em;
}
.sub-title._gray {
 background: #666666;
}
.sub-title span {
 border-radius: .5em;
 margin-right: .8em;
 margin-bottom: .2em;
 padding: .1em .3em 0;
 color: #fff;
 background: var(--main-color);
 font-size: .8125rem;
 font-weight: bold;
 text-transform: uppercase;
}
.anc_button {
 border-radius: 30px; /*角丸*/
 font-size: 1.2em;
 padding: .75em 2.8125em .8em;
 box-shadow: 0 4px 15px color-mix(in srgb, var(--main-color) 60%, transparent);
}
.anc_button._conversion._orange {
 background: linear-gradient(135deg, #f08001 0%, #f05711 100%);
}
.anc_button::before {
 margin-top: -0.2em;
}

/* 基本flexbox */
.content {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
	margin: auto;
    }
.content._column2,
.content._column3{
margin-left: -2%;
}
.content._column2 .content_area{
width: 48%;
margin-left: 2%;
}
@media screen and (max-width: 60em) {
.content._column2{
	flex-direction:column;
}
.content._column2 .content_area{
width: 100%;
margin-left: 0;
}
}
.content._column3 .content_area{
width: 31%;
margin-left: 2%;
}


/*=============================================================
inquiry
=============================================================*/
#inquiry{
 background: var(--main-color-sub);
}
#inquiry .content{
gap:32px;
margin-bottom: 50px;
    }
#inquiry .content .content_area{
align-content: end;
    }
#inquiry .content .content_area .m_text:first-child{
text-align: center;
}
.bt-area{
padding: 20px 0 50px 0;
}
@media screen and (max-width: 760px) {
#inquiry .content{
 flex-direction: column;
    }
}
/*=============================================================
intro
=============================================================*/
.intro {
 background-image: url("/eflex/buried-strength-simulator_intro/images/intro-bg.jpg");
 background-position: top center;
 background-repeat: no-repeat;
 background-size: cover;
}
.intro > .pad {
 padding: 0 20px 30px;
}
@media screen and (max-width: 47.5em) {
 .intro > .pad {
  padding-left: 10x;
  padding-right: 10px;
 }
}
.intro-layout {
 display: flex;
 overflow: hidden;
 height: 700px;
}
.intro-layout > * {
 flex: 1;
}
.intro-layout__contents {
 max-width: 40%;
 padding: 0 20px 20px 0;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.intro-layout__image {
 padding-left: 20px;
}
/*タイトル周り*/
.intro_text {
 font-weight: bold;
 font-size: 2.5cqw;
}
.intro_hdg img{
width: 25cqw;
}
@media screen and (max-width: 1300px) {
.intro_hdg img{
width: 50cqw;
}
}
@media screen and (max-width: 760px) {
.intro_hdg img{
width: 70cqw;
}
}
.intro-layout__image .m_image{
width: 60cqw;
}
@media screen and (max-width: 1300px) {
.intro-layout{
flex-direction: column-reverse;
height: auto;
}
.intro-layout__contents {
 max-width: 100%;
  padding: 0 20px 20px;
}
.intro_text {
 font-size: 3.5cqw;
}
@media screen and (max-width: 760px) {
.intro_text {
 font-size: 4.5cqw;
}}
.intro-layout__image {
 display: flex;
 justify-content: flex-end;
}
.intro-layout__image .m_image{
width: 80cqw;
}
}

.intro-layout__image .image_area{
position: relative;
}
.balloon{
position: absolute;
top:10px;
left:-85px;
font-weight: bold;
}
.balloon p{
  position: relative;
  padding: 15px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.1em;
  font-size: 18px;
  background-color: var(--main-dark);
}
.balloon p::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-left: 20px solid var(--main-dark);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}
@media screen and (max-width: 760px) {
.balloon{
left:-40px;
}
.balloon p{
  padding: 10px;
  width: 60px;
  height: 60px;
    line-height: 60px;
  font-size: 14px;
    letter-spacing: 0.05em;
}
}
/*=============================================================
worry
=============================================================*/
#worry {
 background: #e8e8e8;
}
#worry .pad {
 text-align: center;
}
.in-box {
 width: auto;
 display: inline-block;
}
.in-box ul {
 text-align: left;
 font-size: 1.3em;
}
#worry .m_list-icon > li > .list_icon {
 padding-right: 10px;
}
@media screen and (max-width: 760px) {
.in-box ul {
 font-size: 1.0em;
}
#worry .m_list-icon > li > .list_main {
vertical-align: middle;
}
}
/*=============================================================
service
=============================================================*/
#service {
 background: #fff7e1;
}
#service .circle {
 display: flex;
 display: -webkit-flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 max-width: 800px;
 margin: auto;
 padding-top: 32px;
}
#service .circle li {
 width: 28%;
 aspect-ratio: 1 / 1;
 border-radius: 50%; /*角丸*/
 background-color: var(--main-dark);
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 flex-direction: column;
}
#service .circle p {
 font-size: 1.5em;
 margin-bottom: .5em;
}
@media screen and (max-width: 760px) {
#service .circle p {
 font-size: 1.3em;
}
#service .circle li {
 width: 32%;
 }
#service .circle li img{
 max-height: 50px;
 }
}
@media screen and (max-width: 32em) {
#service .circle p {
 font-size: 1.1em;
}
}
/* 矢印レスポンシブ */
.container {
 max-width: 900px;
 display: flex;
 flex-flow: wrap;
 justify-content: space-around;
 align-items: center;
 margin: 32px auto 0;
}
.flex-item {
 width: 45%;
 text-align: center;
}
.flex-arrow {
 width: 10%;
 position: relative;
}
.flex-arrow::after {
 border-top: .52em solid #000;
 border-right: .52em solid #000;
 content: '';
 display: inline-block;
 margin: auto;
 transform: rotate(45deg);
 position: absolute;
 inset: 0 40% 0 auto;
 height: 1.6em;
 width: 1.6em;
}
#service .container .text_lede{
  display: inline-flex;
  align-items: center;
  line-height: 1;

}
#service .container .text_lede span {
 font-size: 2.5em;
margin: 0 5px;
}
@media screen and (max-width: 32em) {
#service .sub-title {
    margin-top: 0;
}
.flex-arrow::after {
 border-top: .3em solid #000;
 border-right: .3em solid #000;
 inset: 0 40% 0 auto;
 height: 1.0em;
 width: 1.0em;
}
#service .container .text_lede span {
 font-size: 1.7em;
margin: 0 5px;
}
.flex-item div.m_text{
height: 2em;
}
}
/*=============================================================
function
=============================================================*/
/* step */

#function .m_listpage{
margin-top: 32px;
}

/*　step */
.step h2 {
 display: flex;
 align-items: center;
 font-size: 1.5em;
 font-weight: bold;
 color: var(--main-dark);
}
@media screen and (max-width: 760px) {
.step h2 {
 font-size: 1.3em;
}
}
.step h2 .step__no {
 line-height: 1;
margin-right: 15px;
 font-size: .6em;
width: 60px;
    height: 60px;
 aspect-ratio: 1 / 1;
 border-radius: 50%; /*角丸*/
 background-color: var(--main-dark);
color: var(--main-light);
 display: flex;
 justify-content: center;
 align-items: center;

 flex-direction: column;
   text-shadow:2px 2px 0 var(--main-dark), -2px -2px 0 var(--main-dark),
              -2px 2px 0 var(--main-dark), 2px -2px 0 var(--main-dark),
              0px 2px 0 var(--main-dark),  0 -2px 0 var(--main-dark),
              -2px 0 0 var(--main-dark), 2px 0 0 var(--main-dark);
}
.step h2 .step__no span{
font-size: 4em;
}
/*=============================================================
product
=============================================================*/
#product {
 background: #fff7e1;
}
.item-panel {
 display: flex;
 gap: 20px; /* 子要素間に空きスペースを持たせる */
 margin-top: 32px;
 flex-direction:column;
}
.item-panel > .panel {
  display: flex;
 /* width: calc((100% - 30px) / 1);  親要素の幅からgapを引いて、その半分を指定 */
  background-color: #FFF;
}
.item-panel > .panel .img {
 flex-shrink: 0; /* ★ポイント★ */
 padding: 20px;
}
@media only screen and (max-width: 750px) {
.item-panel > .panel .img img {
width: 90px;
}
}
.item-panel > .panel .desc {
 display: flex;
 flex-direction: column;
 padding: 20px 20px 20px 0;
 width: 100%;
}
.item-panel > .panel .txt {
 margin-top: 16px;
}
.item-panel .sub-title{
margin-top: 0;
}