@charset "UTF-8";

/*
Theme Name: 勝俣探偵事務所のwebサイト
Description: 勝俣探偵事務所のウェブサイト用テーマ
Author: 
*/



:root{
--main_color:#FA901C;
--sub_color:#FFBF78;
--color_2:#ECECEC;
--text_color:#292929;
--bg_color:#ffffff;
--gradation: #f47521;
}

html{
scroll-behavior: smooth;
}

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;}input,textarea{outline:none;}


body{
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.75;
color: var(--text_color);
background-color: var(--bg_color);
a{
color: var(--text_color);
}
}

.outer{
position: fixed;
top: 160px;
left: 140px;
width: 32%;
>.outer-list{
display: flex;
gap: 0 20px;
justify-content: center;
margin-top: 30px;
>li{
width: 50px;
height: 50px;
&:nth-of-type(3){
border: 1px solid var(--text_color);
border-radius: 8px;
}
}
}
&::before{
/* content: "";
display: block;
width: 30%;
aspect-ratio: 1/1;
background:var(--color_2);
clip-path: polygon(0 0, 100% 0, 0 100%);
position: fixed;
top: 0;
left: 0;
z-index: -1; */
}
&::after{
content: "";
display: block;
width: 200px;
height: 200px;
background: url(img/24ashiato2.png) no-repeat 0 0/140px;
position: fixed;
top: 20px;
left: 20px;

}

}


.container{
width: 500px;
margin-left: 52%;
box-shadow: 4px 0 4px #acacac,	-4px 0 4px #acacac;
position: relative;
padding-top: 80px;
background-color: var(--bg_color);
}

header{
background: #00000085 url(img/01logo.png) no-repeat 5px center/34px;
display: flex;
height: 80px;
align-items: center;
justify-content: space-between;
padding-left: 15px;
position: fixed;
top: 0;
width: 500px;
z-index: 3000;
box-shadow: 0	2px 4px #acacac;
.header-inner>a{
display: flex;
flex-direction: column;
padding-left: 34px;

h1{
color: #FFF;
font-size: 22px;
order: 2;
font-weight: normal;
border-top: 1px	solid #fff;
line-height: 1.3;
}
p{
color: #FFF;
font-size: 13px;
order: 1;
letter-spacing: -0.1em;
}
&:hover{
opacity: 0.7;
}
}

.nav-list{
display: flex;
align-items: center;
>p{
width: 50px;
height: 50px;
>img{
object-fit: cover;
width: 100%;
height: 100%;
}
&:first-of-type{
margin-right: 10px;
}
}
}
}


/* ハンバーガーナビゲーション */
#g-nav{
display: none;
position: fixed;
top: 80px;
left: 0;
width: 500px;
margin-left: 52%;
height: calc(100vh - 80px);
background: var(--main_color);
z-index: 400;
text-align: center;
padding-top: 100px;
li{
margin-bottom: 30px;
>a{
color: #FFF;
font-size: 24px;
padding: 6px 20px;
border-bottom: 2px solid #FFF;
&:hover{
color: var(--color_2);
border-bottom: 2px solid var(--color_2);
}
}
}
}

.main-visual{
padding: 20px 10px;
text-align: center;
}

.main-txt{
padding: 20px 10px;
text-align: center;
}


/* メインナビゲーション */
.main-nav{
padding: 30px 0;
top: 80px;
left: 0;
z-index: 100;
width: 100%;
background: var(--bg_color) url(img/08ashiato.png) no-repeat 0 0/90px;
>h2{
text-align: center;
font-size: 42px;
color: var(--main_color);
margin-bottom: 10px;
font-family: "Oswald", sans-serif;
}
>ul{
display: flex;
flex-direction: column;
gap: 30px 0;
a{
display: block;
background: url(img/05menu01.png) no-repeat 0 0/contain;
width: 90%;
aspect-ratio: 714/240;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
&:hover{
opacity: 0.8;
transition: 0.2s	ease-in-out;
}
}
>li:nth-of-type(2) a{
background: url(img/06menu02.png) no-repeat 100% 0/contain;
padding:60px 80px;

margin-left: auto;
}
>li:nth-of-type(3) a{
background: url(img/07menu03.png) no-repeat 0 0/contain;
}
}
}


main{
position: relative;
padding-bottom: 10px;
}

.page-template-index main{
padding-bottom: 90px;
}


.page-section{
position: relative;
}

#price{
padding: 140px 10px 30px;
background: linear-gradient(to bottom, var(--main_color),var(--gradation)),url(img/09ashiato.png) no-repeat 100% 10px/150px;
position: relative;
&::before{
content: "";
display: block;
width: 100%;
height: 100px;
background: url(img/11gizagiza.png) no-repeat 0 0/contain;
position: absolute;
top: 60%;
left: 0;
z-index: 5;
}

&::after{
content: "";
display: block;
width: 100%;
height: 500px;
background: var(--gradation);
position: absolute;
bottom: -498px;
left: 0;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
>h2{
color: var(--bg_color);
font-size: 85px;
line-height: 1;
font-family: "Oswald", sans-serif;
position: absolute;
top: 64px;
z-index: 2;
}

@media (width <= 920px) {
padding: 180px 10px 30px;
}
}


.section-box{
background-color: var(--sub_color);
padding: 20px;
border-radius: 5px;
border-radius: 20px;
border: 2px solid var(--bg_color);
border-right: 6px	solid var(--bg_color);
border-bottom: 6px	solid var(--bg_color);
margin-bottom: 80px;
position: relative;
z-index: 2;
.price-list{
padding: 20px;
>h3{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.kodo{
width: 100%;
aspect-ratio: 775/300;
background: url(img/20price01.png) no-repeat 0 0/contain;
}
}
.price-note{
text-align:center;
}
	
.price26{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 775/300;
background: url(img/26price.png) no-repeat 0 0/contain;
}
	
.price-owl{
width: 70%;
margin: 0 auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 775/300;
background: url(img/25owl01.png) no-repeat 0 0/contain;	
}

.plan-a{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 549/314;
background: url(img/27planA.png) no-repeat 0 0/contain;
margin-bottom: 50px;
}
.plan-b{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 549/314;
background: url(img/28planB.png) no-repeat 0 0/contain;
margin-bottom: 50px;
}
.plan-c{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 549/314;
background: url(img/29planC.png) no-repeat 0 0/contain;
padding-bottom: 4px;
}


	.price-note2{
		text-align:center;
		padding-top:30px;
	}
	
.price-text{
display: flex;
align-items: center;
justify-content: center;
gap: 0 20px;
margin-bottom: 30px;
}
.price-circle{
width: 60px;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: var(--bg_color);
text-align: center;
line-height: 1.2;
font-weight: bold;
padding-top: 10px;
}
.price{
font-size: 22px;
>span{
font-weight: bold;
font-size: 28px;
}
}
.kodo-box{
margin-bottom: 200px;
}
}
#gps-rental{
scroll-margin-top: 180px;
}

.section-box.gps{
border: 2px solid var(--text_color);
border-right: 6px	solid var(--text_color);
border-bottom: 6px	solid var(--text_color);
>h3{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 777/221;
background: url(img/23price03.png) no-repeat 0 0/contain;
margin-bottom: 20px;
}
.price-text{
background: url(img/14car.png) no-repeat 10% 50%/contain;
padding: 10px;
padding-left: 30px;
justify-content: center;
margin-bottom: 0;
}
.price-circle{
background-color: var(--text_color);
color: var(--bg_color);
padding-top: 20px;
}
.plus{
text-align: center;
font-size: 36px;
}
.support{
text-align: center;
font-size: 18px;
margin-bottom: 10px;
}

}


.hitosagashi{
margin-bottom: 50px;
.price-list{
.iede{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 100%;
aspect-ratio: 774/205;
background: url(img/21price02.png) no-repeat 0 0/contain;
>span{
font-size: 30px;
font-weight: normal;
text-indent: 0.4em;
display: block;
}
}
}
}

.gps31{
width: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 775/300;
background: url(img/31gps.png) no-repeat 0 0/contain;
}
.price-owl2{
width: 70%;
margin: 0 auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
aspect-ratio: 775/300;
background: url(img/30owl02.png) no-repeat 0 0/contain;	
}

#articles,#topics{
padding: 100px 10px 20px;
scroll-margin-top: 40px;
>h2{
font-size: 60px;
color: var(--bg_color);
line-height: 1;
font-family: "Oswald", sans-serif;
position: absolute;
top: 45px;
right: 20px;
z-index: 2;
}
.section-box{
border: 2px solid var(--gradation);
border-right: 6px	solid var(--gradation);
border-bottom: 6px	solid var(--gradation);
background-color: var(--bg_color);

>h3{
font-size: 24px;
font-weight: normal;
text-align: center;
border-bottom: 2px solid var(--main_color);
margin-bottom: 40px;
}

.post-list{
margin-bottom: 50px;
>li{
background: url(img/15arrow.png) no-repeat 0 10%/24px;
font-size: 14px;
padding: 6px 0 6px 30px;
margin-bottom: 10px;
line-height: 1.2;
>a:hover{
border-bottom: 2px solid var(--main_color);
}
&.post-img{
background: none;
width: 60%;
aspect-ratio: 16/10;
margin: 0 auto 40px;
padding: 0;
img{
object-fit: cover;
width: 100%;
height: 100%;
&:hover{
opacity: 0.9;
transition: all 0.2s	ease-in-out;
}
}
}
}
}


.more-link{
display: block;
width: 240px;
margin: 0 auto 20px;
padding: 14px 0;
text-align: center;
background-color: var(--main_color);
color: var(--bg_color);
border-radius: 200px;
border: 2px solid var(--main_color);
&:hover{
background-color: var(--bg_color);
color: var(--main_color);
transition: all 0.2s ease-in-out;
}
}
}
}

#topics>h2{
color: var(--main_color);
}




#about{
padding: 130px 10px;
background-color: var(--bg_color);
position: relative;
&::after{
content: "";
display: block;
width: 100%;
height: 100px;
background: url(img/17gizagiza.png) no-repeat 0 50%/contain;
position: absolute;
top: 50%;
left: 0;
z-index: 5;
}
&::before{
content: "";
display: block;
width: 100%;
height: 760px;
background: var(--color_2);
position: absolute;
left: 0;
top: 0;
}


>h2{
font-size: 54px;
line-height: 1;
font-family: "Oswald", sans-serif;
position: absolute;
top: 80px;
left: 20px;
}
}

.about-area{
background: var(--color_2) url(img/16ceo.png) no-repeat 100% 10px/160px;
border: 2px solid var(--text_color);
border-right: 6px	solid var(--text_color);
border-bottom: 6px	solid var(--text_color);
padding: 40px 30px;
h3{
width: 70%;
font-size: 30px;
border-bottom: 2px solid var(--text_color);
margin-bottom: 60px;
padding-bottom: 10px;
}
.ceo-name{
text-align: right;
margin-top: 20px;
font-weight: bold;
}
}
.about-box{
margin-bottom: 150px;
padding: 30px 20px 100px;
}
.info-box{
background: url(img/Frame3.png) no-repeat 100% 100%/130px;
>h3{
width: 100%;
padding-bottom: 0;
}
>dl{
display: flex;
flex-wrap: wrap;
gap: 20px 0;
>dt{
width: 30%;
}
>dd{
width: 70%;
}
}
.certification{
font-size: 13px;
margin-top: -10px;
}

}


.to-top{
display: block;
width: 70px;
position: absolute;
bottom: 10px;
right: 4px;
z-index: 100;
}



footer{
background-image: linear-gradient(to right, var(--main_color),var(--gradation));
padding: 50px 0;
color: var(--bg_color);
.footer-nav>ul{
display: flex;
justify-content: center;
gap: 0 4px;
margin-bottom: 20px;
>li{
align-self: center;
>a{
display: block;
text-align: center;
color: var(--bg_color);
padding: 2px 4px;
font-size: 13px;
}
&:nth-of-type(n+2){
border-left: 1px solid var(--bg_color);
}
}
}
.sns{
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
>li{
width: 50px;
height: 50px;
background-color: #ffffff;
border-radius: 50%;
padding: 10px;
}
}
>p{
text-align: center;
font-size: 12px;
}
}


/* 調査事例一覧ページ */
.articles-section{
padding-bottom: 50px;
>h2{
color: var(--main_color);
font-size: 30px;
text-align: center;
padding: 20px 0 50px;
}
}


.case-list{
width: 90%;
margin: 0 auto;
border: 3px solid var(--main_color);
border-radius: 20px;
padding: 20px;
color: var(--text_color);
margin-bottom: 50px;
>h3{
padding-bottom: 10px;
font-size: 20px;
border-bottom: 3px solid #000;
}

.case-date{
text-align: right;
font-size: 18px;
padding: 10px 0;
margin-bottom: 20px;
}
.case-article{
padding: 5px;
font-size: 16px;
margin-bottom: 30px;
}
}


/* 920px以下 */
@media (width <= 920px){

.outer{
display: none;
}
.container{
width: 70%;
margin: 0 auto;
}

header{
width: 70%;
}
#g-nav{
width: 70%;
left: 15%;
}
}

/* 600px以下 */
@media (width <= 600px){
.container{
width: 100%;
box-shadow: none;
}
header{
width: 100%;
padding-left: 10px;
}
#g-nav{
width: 100%;
left: 0;
margin-left: 0;
}
header>.header-inner>a>h1{
font-size: 20px;
}
header>.header-inner>a>p{
font-size: 12px;
}
.hamburger{
padding: 10px!important;
}
#ham-btn{
color: var(--color_2);
}

.section-box{
.price-circle{
width: 50px;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: var(--bg_color);
text-align: center;
line-height: 1.2;
padding-top: 10px;
font-size: 14px;
}
.price{
font-size: 20px;
>span{
font-weight: bold;
font-size: 24px;
}
}

}



.section-box.gps{
.price-text{
background: url(img/14car.png) no-repeat 10% 50%/contain;
padding: 10px;
justify-content: center;
margin-bottom: 0;
}
.price{
margin-left: 60px;
}

.price-circle{
background-color: var(--text_color);
color: var(--bg_color);
padding-top: 20px;
}
.plus{
text-align: center;
font-size: 36px;
}
.support{
text-align: center;
font-size: 18px;
margin-bottom: 10px;
}

}




}




/* ページネーションのスタイル */
.page-wrapper{
text-align: center;
}
.page-numbers{
margin: 6px;
border: 1px solid var(--main_color);
padding: 10px 14px;
&.next{
border: none;
}
&.prev{
border: none;
}
&.current{
background-color: var(--main_color);
color: var(--bg_color);
}
}



/* ハンバーガーのボタン */
.hamburger-inner{
background-color: #FFFFFF!important;
&::before, &::after{
background-color: #FFFFFF!important;
}
}



.more-link{
display: block;
width: 240px;
margin: 0 auto 20px;
padding: 14px 0;
text-align: center;
background-color: var(--main_color);
color: var(--bg_color);
border-radius: 200px;
border: 2px solid var(--main_color);
&:hover{
background-color: var(--bg_color);
color: var(--main_color);
transition: all 0.2s ease-in-out;
}
}