@charset "utf-8";

/*-----スタイルシート　1910--------------------------------------------*/
/*HTML5 Doctor Reset Stylesheet*/

@import url("rest.css");

/*-------------------------------------------------*/
/*全体設定*/

:root{
--ac1:#006E6E;
--ac2:#F02D5F;
--tx1:#09120B;
--f-not:"Noto Sans JP", sans-serif;
--f-ubn:"Urbanist", sans-serif;
}

/*-------ローカルに置き換え-----------*/

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/*--------------------*/



.sp_only { display:none;}
#wrapper {
width:100%;
font-family: var(--f-not);
font-size: 20px;
color: var(--tx1);
}
#contents {
width:100%;
margin:0 auto;
}
div,section {
justify-content: space-between;
flex-wrap: wrap;
}
p {
font-size: 19px;
line-height: 2.0em;
letter-spacing: 0.01em;
font-weight: 600;
}



/*-------------------------------------------------*/
/*ヘッダー*/
header.hdac{
width: 100%;
min-width: 1100px;
z-index: 50;
display: flex;
justify-content: space-between;
position: fixed;
background: rgba(255,255,255,0.35);
transition: 0.2s ease-in-out;
}
header.hdac.active{
background: rgba(255,255,255,0.85);
}
.logo{
}

.logo img{
width: 280px;
padding: 15px;
}
.header_nav {
display: flex;
justify-content: flex-end;
align-items: center;
}

.header_nav ul{
display: flex;
align-items: top;
margin-top: 15px;
margin-right: 15px;
}
.header_nav ul li{
margin: 10px 1px;
font-size: 18px;
font-weight: 600;
}

.header_nav ul li a{
padding: 7px 8px 10px;
transition: 0.1s ease-in-out;
transform: translateY(-7px);
display: block;
}
.header_nav ul li a:hover{
color: var(--ac2);
background: rgba(255,255,255,0.65);
border-radius: 5px;
}
a.hd_icon{
background: var(--ac2);
color: #fff;
border-radius: 10px;
text-align: center;
font-size: 20px;
margin-left: 5px;
margin-right: 15px;
padding: 5px 21px 7px;
transition: 0.1s ease-in-out;
display: flex;
align-items: center;
}
a.hd_icon img{
width: 30px;
margin-right: 9px;
margin-top: -0px;
}
a.hd_icon:hover{
background: #F57495;
}

.pagetop {
position: fixed;
padding: 20px 14px;
right: 10px;
bottom: -110px;
z-index: 101;
background: var(--ac2);
color: #fff;
font-size: 18px;
text-align: center;
letter-spacing: 0.00em;
transition: 0.7s;
border-radius: 12px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.17);
line-height: 1.2em;
}
.pagetop.act {
bottom: 10px;
}


/*-----フェードアニメーション-----*/
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}

.fade-in-down {
transform: translate(0, -50px);
}

.fade-in-left {
transform: translate(-50px, 0);
}

.fade-in-right {
transform: translate(50px, 0);
}

.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
.delay1{
transition-delay: 0.4s;
}

.delay2{
transition-delay: 0.8s;
}
/*-----スクロールアニメーション-----*/
.scr_act {
/*transition: 0.8s ease-in-out;*/
}
/*-------------------------------------------------*/
/*フッター*/


footer {
width: 100%;
min-width: 1100px;
position: relative;
background: var(--ac1);
padding: 75px 0 35px;
overflow: hidden;
color: #fff;
}
.ft_name {
width: 1100px;
margin: 0 auto;
}
.ft_name img {
width: 400px;
margin-bottom: 20px;
}
.ft_name div {
width: 500px;
display: flex;
justify-content: flex-start;
gap:18px;
align-items: center;
}
.ft_name div p:nth-of-type(1) {
}
.ft_name div p:nth-of-type(2) {
line-height: 1.3em;
font-size: 18px;
font-weight: 400;
}
footer ul {
display: flex;
justify-content: flex-end;
width: 1100px;
margin: 50px auto 20px;
gap:30px;
}
footer ul a {
font-size: 16px;
}

#copyright {
text-align: center;
font-size: 13px;
font-weight: 100;
}

/*
<footer>
<div class="ft_name">
<img src="images/pt_w.png" alt="">
<div>
<p>販売代理</p>
<p>株式会社モストプランナーズ<br>〒442-0051 愛知県豊川市中央通4-61</p>
</div>
</div>

<ul>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">特定商取引法に基づく表記</a></li>
</ul>


<div id="copyright"><script type="text/javascript"> document.write(copyright); </script>　コピーライト　All Rights Reserved.</div>

</footer>
*/


/*-------------------------------------------------*/
/*コンテンツ*/

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　TOP　◆◆*/

/*--////　main_visual　////--*/
#main_visual{
width: 100%;
min-width: 1100px;
background: url("../images/main.webp") center center;
background-size: cover;
position: relative;
padding-top: 140px;
padding-bottom: 190px;
}

#main_visual div{
width: calc(50% + 115px);
background: rgba(255,255,255,0.8);
padding: 50px 50px 0px calc(50vw - 550px);
/*font-family:var(--f-tkM);*/
}
#main_visual div h1{
position: relative;
font-size: 50px;
font-weight: 900;
margin-bottom: 30px;
}
#main_visual div h1 span{
display: block;
position: absolute;
font-size: 38px;
background: var(--ac2);
padding: 7px 12px 9px;
top: 82px;
left: -10px;
transform: rotate(-7deg);
color: #fff;
}
#main_visual div h1 strong{
display: block;
margin-left: 140px;
margin-top: 20px;
font-size: 71px;
color: var(--ac2);
}
#main_visual div p{
font-weight: 600;
font-size: 27px;
}
#main_visual div ul{
display: flex;
justify-content: space-between;
}
#main_visual div ul li{
color: #fff;
background: var(--ac1);
width: 180px;
border-radius: 90px;
text-align: center;
padding: 70px 0 74px;
font-weight: 900;
font-size: 39px;
margin-top: 30px;
margin-bottom: -130px;
}

/*--////　toku　////--*/
#toku {
width: 1100px;
margin: 0 auto;
padding: 100px 0 80px;
display: flex;
}
#toku div {
width: 520px;
margin-top: 20px;
}
#toku div h2 {
color: var(--ac1);
font-weight: 900;
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
font-size: 57px;
letter-spacing: 0.05em;
}

#toku div h2 span:nth-of-type(1) {
position: absolute;
width: 100px;
height: 2px;
background: var(--ac1);
content: "";
left: 230px;
top: 32px;
transform: rotate(45deg);
}
#toku div h2 span:nth-of-type(2) {
position: absolute;
width: 100px;
height: 2px;
background: var(--ac1);
content: "";
left: 230px;
top: 32px;
transform: rotate(-45deg);
}
#toku img {
width: 438px;
margin: 0 41px;
}
/*--////　fea　////--*/
#fea {
width: 1100px;
display: flex;
margin: 0 auto;
padding: 0px 0 100px;
}
#fea div {
width: 340px;
}
#fea div h2 {
text-align: center;
color: var(--ac1);
font-weight: 900;
font-size: 40px;
margin-bottom: 15px;
}
#fea div img {
width: 100%;
margin-bottom: 10px;
}
#fea div h3 {
text-align: center;
color: var(--ac1);
font-weight: 900;
font-size: 22px;
margin-bottom: 15px;
line-height: 1.3em;
}
#fea div h3 span {
font-size: 15px;
}
#fea div p {
line-height: 1.5em;
font-size: 19.5px;
}

/*--////　craft　////--*/
#craft {
background: url("../images/craft.webp");
background-size: cover;
padding: 80px 0;
}
#craft div {
width: 440px;
margin-left: calc(50% + 80px);
}
#craft h2 {
font-weight: 900;
font-size: 43px;
color: var(--ac1);
margin-bottom: 25px;
}
#craft p {
}
/*--////　siyo　////--*/
#siyo {
width: 1100px;
margin: 0 auto;
padding: 100px 0 50px;
}
#siyo h2 {
font-size: 50px;
font-weight: 900;
color: var(--ac1);
margin-bottom: 60px;
}
.siyo_in {
display: flex;
margin-bottom: 80px;
}
.siyo_in > div {
width: 520px;
}
.siyo_in > div h3 {
font-size: 30px;
font-weight: 800;
}
.siyo_in > div table {
margin: 20px 0;
width: 100%;
border-collapse: collapse;
border: 1px solid #aaa;
font-size: 18px;
}
.siyo_in > div table a {
color: #1A49FD;
text-decoration: underline;
}
.siyo_in > div table tr {
border: solid #aaa;
border-width: 1px 0;
}
.siyo_in > div table th {
padding: 16px 15px;
background: #FDEAEF;
}
.siyo_in > div table td {
padding: 16px 15px;
}
.siyo_in > div > div {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.siyo_in > div > div h4 {
color: var(--ac2);
font-size: 34px;
font-weight: 800;
}
.siyo_in > div > div a {
background: var(--ac2);
color: #fff;
padding: 13px 75px 11px 18px;
font-size: 27px;
font-weight: 600;
border-radius: 10px;
transition: 0.1s ease-in-out;
letter-spacing: 0.1em;
}
.siyo_in > div > div a:hover {
background: #F57495;
}
.siyo_in > div > div a img {
width: 30px;
margin-right: 40px;
margin-top: -5px;
}
.siyo_in > div p {
font-size: 16px;
line-height: 1.3em;
font-weight: 300;
}
.siyo_in img {
width: 520px;
}
/*--////　faq　////--*/
#faq {
padding: 0px 0 100px;
width: 1100px;
margin: 0 auto;
}
#faq h2 {
font-size: 50px;
font-weight: 900;
color: var(--ac1);
margin-bottom: 60px;
}
#faq dl {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#faq dt {
width: 70px;
text-align: center;
padding: 21px 0 21px;
border: 1px var(--ac1) solid;
border-radius: 35px;
font-size: 26px;
font-weight: 700;
font-family:var(--f-ubn);
margin-bottom: 30px;
color: var(--ac2);
}
#faq dd {
width: 1010px;
margin-bottom: 30px;
}
#faq dd h3 {
font-size: 22px;
font-weight: 800;
color: var(--ac1);
margin-bottom: 10px;
margin-top: 10px;
}
#faq dd p {
line-height: 1.4em;
font-weight: 500;
padding-left: 23px;
text-indent: -23px;
}

/*--////　jire　////--*/
#jire {
padding: 0px 0 100px;
width: 1100px;
margin: 0 auto;
}
#jire h2 {
font-size: 50px;
font-weight: 900;
color: var(--ac1);
margin-bottom: 60px;
}
#jire div {
display: flex;
}
#jire div img {
width: 340px;
}

/*--////　lnk　////--*/
#lnk {
width: 1100px;
margin: 50px auto 150px;
display: flex;
gap:60px;
justify-content: center;
align-items: center;
border: #E5F0F0 10px solid;
padding: 20px;
}
#lnk h2 {
font-weight: 700;
font-size: 42px;
}
#lnk p {
transform: rotate(-90deg);
color: var(--ac1);
font-size: 30px;
}
#lnk a {
font-weight: 700;
color: #fff;
background: var(--ac2);
padding: 18px 100px 13px 15px;
border-radius: 10px;
font-size: 28px;
transition: 0.1s ease-in-out;
}
#lnk a:hover {
background: #F57495;
}
#lnk a img{
width: 40px;
margin-right: 65px;
margin-top: -7px;
}