/*
Theme Name: OFFICE HARA
*/

@charset 'utf-8';

/*** The new CSS reset - version 1.11.1 (last updated 24.10.2023) ***/

*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg*,symbol*)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
h1,h2,h3,h4,h5,h6{margin:0;}
h3,h4,h5,h6{margin-bottom:1em;}
a,button{cursor:revert}
a{outline:none;text-decoration:none;}
ol,ul,li,menu,summary{list-style:none;margin:0;padding:0;}
img{max-inline-size:100%;max-block-size:100%;vertical-align:middle;}
table{border-collapse:collapse}
dd{margin:0;}
input,textarea{-webkit-user-select:auto}
textarea{white-space:revert}
meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}

/* noto-serif-jp-regular - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/noto-serif-jp-v31-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-600 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/noto-serif-jp-v31-japanese_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-800 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 800;
  src: url('assets/fonts/noto-serif-jp-v31-japanese_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-jp-regular - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/noto-sans-jp-v52-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-500 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/noto-sans-jp-v52-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/noto-sans-jp-v52-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-900 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/noto-sans-jp-v52-japanese-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root{
	/*--main_color:#fff56b;*/
	--main_color:#aac766;
	--sub_color:#94c5bd;
	--main_width:960px;
	--pdg:4em;
	--bdr:1em;
	--bgc:#fff;
	--faf:'Font Awesome 6 Free';
	--fab:'Font Awesome 6 Brands';
	--fs1:2.2rem;
	--fs2:1.6rem;
	--fs3:0.8rem;
}
html{font-size:16px;}
@media (width >= 1024px){
	html{font-size:18px;}
}
body{
margin:0;padding:0;font-family: 'Noto Sans JP', sans-serif;font-weight: 500;font-feature-settings: "palt";color:#333;
/*font-size:clamp(1rem, 0.97rem + 0.129vw, 15px);*/
animation: fadeIn 0.8s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

	body{padding-bottom:4em;}
header{display:flex;align-items:center;padding:0.8em;background:#fff;z-index:100;}
header h1{font-size: clamp(1rem, 1rem + 1vw, 1.5rem);}
header h1 a{display:flex;flex-wrap:wrap;align-items:center;gap:0.5em;color:#333;}
	header h1 a img{width:160px;height:auto;}
header h1 a span{display:block;line-height:1;}
header h1 a span span{margin-bottom:0em;font-size:0.5em;}
nav{position:fixed;left:0;bottom:0;width:100%;background-color:#546459;z-index:100;}
nav ul{display:flex;margin:0;padding:0;}
nav li{flex:1;}
nav li a{}
nav li a{display:grid;place-content:center;text-align:center;white-space:nowrap;font-size:0.8em;padding:1em 0;color:#fff;font-weight:400;}
nav li:nth-child(1) a::after{content:'Product';}
nav li:nth-child(2) a::after{content:'Feasible';}
nav li:nth-child(3) a::after{content:'Case Study';}
nav li:nth-child(4) a::after{content:'Company';}
	nav li a::after{margin-top:0.2em;color:#fff;}

#bread{display:flex;max-width:960px;margin:1em auto 0;}
#bread li:first-child::after{content:'>';padding:0 1em;}
#bread li a{text-decoration:underline;color:#222;}

@media (width >= 820px) {
	body{padding-bottom:0;}
	
	header{position:sticky;top:0;left:0;width:100%;padding:1em 2em;}
	header h1 a img{width:300px;height:auto;}
	header h1 a span:first-of-type{margin-bottom:0.5em;font-size:0.3em;}
	
	nav{width:auto;margin-left:auto;}
	nav{position:static;background:none;color:inherit;}
	nav li a{padding:1em clamp(1rem, 0.757rem + 1.036vw, 2rem);font-size:1em;color:inherit;font-weight:700;}

nav li a::after{display:block;margin-top:0.5em;text-align:center;font-size:0.8em;font-weight:500;color:var(--main_color);}

	/*
	nav li a::before{font-family:var(--faf);font-weight: 900;display:block;text-align:center;margin-bottom:0.2em;font-size:1.4em;}
	nav li:nth-child(1) a::before{content:'\f0a6';}
	nav li:nth-child(2) a::before{content:'\f157';}
	nav li:nth-child(3) a::before{content:'\f5a0';}
	nav li:nth-child(4) a::before{content:'\f073';}*/

	
}




figure#top img{width: 100%;    height: auto;    max-height: 650px;    object-fit: cover;object-position:center;}


.box{max-width:960px;margin:auto;}
main > section{padding:4em 1em;text-align:center;}
main h2{display:inline-block;margin:0 auto 2em;line-height:1.6;font-size:1.2em;text-align:center;font-weight:700;}
main h2 > span{display:block;}
main > section p{text-align:left;}
main p{line-height:2;margin:0;letter-spacing:0.05em;}
main p:not(:last-of-type){margin-bottom:1.8em;}
#about h2::after{content:'About';}
#tender h2::after{content:'Suggestion';}
#product h2::after{content:'Product';}
#point h2::after{content:'Feasible';}
#osusume h2::after{content:'Recommend';}
#casestudy h2::after{content:'Case Study';}
#company h2::after{content:'Company';}
main h2::after{display:block;margin-top:0.8em;font-size:0.7em;color:var(--main_color);text-align:center;-webkit-text-stroke:0;text-shadow:none;font-weight:500;}

@media (width >= 820px){
	main h2{font-size:var(--fs2);}
}


#top{padding:12% 2em;min-height:auto;}
#top div{max-width:1100px;}
#top div p{display:inline-block;text-align:left;font-size:1.1em;color:#fff;/*background:rgba(60,89,69,0.8);*/border-radius:1em;
	paint-order:stroke fill;-webkit-text-stroke: rgba(0,0,0,0.3) 4px;text-stroke: rgba(0,0,0,0.3) 4px;text-shadow:0px 0px 5px rgba(0,0,0,1.0);}

@media (width >= 820px){
	#top{padding:8% 2em;}
	#top div p{padding:1.5em;text-align:left;font-size:var(--fs1);}
}

#tender .box{max-width:800px;}


#product{background:var(--main_color);background:#f0f0f0;}
#product .box{padding:2em 1em;border-radius:1em;background:#fff;}
#product figure{margin-top:2em;margin-bottom:0;}
#product .sec1 {max-width:650px;margin:auto;}
#product p span{white-space:nowrap;}
#product .p1{margin-top:2em;}
#product .p2{font-size:1.2em;margin:2em 0;text-align:center;}
#product .p3{font-size:1.2em;margin:2em 0 1em;}
#product .p4{padding:2em;background:#f0f0f0;border-radius:1em;}

@media (width >= 820px){
	#product .box{padding:4em;}
	#product .p2,#product .p3{font-size:var(--fs2);}
}


#point{counter-reset:point;}
#point .box{max-width:1100px;}
#point .box > div{padding:1em;background:#f0f0f0;border-radius:1em;}
#point section{padding:2em;border-radius:1em;background:#fff;border-radius:1em;}
#point section:not(:last-of-type){margin-bottom:1em;}
#point section h3{min-height:6em;vertical-align:middle;}
#point section h3::before{counter-increment:point;content:"Point" counter(point);display:block;margin-bottom:1em;padding:0.5em;
	color:var(--sub_color);font-weight:500;
	background:var(--main_color);color:#fff;border-radius:10px;}
#point section h3 span{white-space:nowrap;}
#point svg{min-height:4em;margin:0 auto 1em;color:var(--sub_color);}
#point li{text-align:left;font-size:0.95em;}

@media (width >= 768px){
	#point .box > div{display:flex;gap:2em;padding:2em;}
	#point section{flex:1;padding:2em;}
	#point section:not(:last-of-type){margin-bottom:0;}
}


#osusume{background:url(/wp/wp-content/uploads/bg2.webp) no-repeat center;background-size:cover;}
#osusume .box{padding:2em;border-radius:1em;background:#fff;}
#osusume ul{max-width:550px;margin:auto;}
#osusume li{padding:0.6em 0;text-align:left;padding-left:1.4em;text-indent:-1.4em;border-bottom:dotted 1px #ccc;}
#osusume li::before{content:'\f14a';font-family:var(--faf);font-weight:600;margin-right:0.5em;color:var(--main_color);}

@media (width >= 820px){
	#osusume .box{padding:4em;}
}


#casestudy{counter-reset:case;}
#casestudy .box{max-width:1100px;}
#casestudy h2{}
#casestudy h2 + p{margin-bottom:4em;text-align:center;}
#casestudy section{display:flex;flex-direction:column;text-align:left;}
#casestudy section:not(:last-of-type){margin-bottom:4em;}
#casestudy section div{order:2;}
#casestudy section h3{font-size:var(--fs2);text-align:center;}
#casestudy section h3 span{position:relative;}
#casestudy section h3::before{counter-increment:case;content:"Case" counter(case);display:block;margin-bottom:0.6em;color:var(--sub_color);font-size:0.8em;font-weight:500;}
#casestudy section h3 span::before {position: absolute;bottom: 0;left: 0;display: inline-block;content: "";width: 100%;height: 16px;background: #FCEA1B;z-index: -1;}


#casestudy section figure{width:100%;aspect-ratio:640 / 480;object-fit:cover;object-position:center;}
#casestudy section figure img{border-radius:1em;}

@media (width >= 768px){
	#casestudy section{flex-direction:row;gap:4em;}
	#casestudy section div{width:50%;}
	#casestudy section:nth-child(even) figure{order:2;}
	#casestudy section h3{text-align:left;}
	#casestudy section figure{width:40%;aspect-ratio:640 / 480;object-fit:cover;object-position:center;}
}


#company{background:#f0f0f0;}
#company .box{max-width:1100px;}
#company .sec1,#company .sec2,#company .sec3{padding:2em;border-radius:1em;background:#fff;}
#company .sec1,#company .sec2,#company .sec3{margin-bottom:4em;}
#company h3{margin-bottom:2em;}
#company .sec1 h4{padding-bottom:0.5em;text-align:left;font-size:1rem;border-bottom:solid 2px var(--main_color);}
#company .sec1 p{margin:0;line-height:1.6;font-size:var(--fs3);}
#company .sec1 .gb-looper-fa3de041{display:block;}
#company .sec1 .gb-looper-fa3de041 section:not(:last-of-type){margin-bottom:2em;}
#company .sec3 ul{display:grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap:1em 2em;max-width:600px;margin:0 auto;text-align:left;}
#company .sec3 ul li::before{content:'\f058';font-family:var(--faf);font-weight:600;margin-right:0.5em;color:var(--main_color);}
#company .sec2 > p:last-of-type{text-align:right;}
#company .sec2 section{margin-top:4em;padding:1em;border:solid 1px #333;text-align:left;border-radius:1em;}
#company .sec2 section .wp-block-columns{display:block;margin-bottom:0;justify-content:space-between;}
#company .sec2 section .wp-block-columns .wp-block-column:last-child{}
#company figcaption{text-align:center;}


@media (width >= 820px){
	#company .sec1,#company .sec2,#company .sec3{padding:4em;}
	#company .sec1 .gb-looper-fa3de041{display:grid;gap:3em;}
	#company .sec1 .gb-looper-fa3de041 section:not(:last-of-type){margin-bottom:0;}
	#company .sec2 section{padding:2em;}
	#company .sec2 section .wp-block-columns{display:flex;}
	#company .sec2 section .wp-block-columns .wp-block-column:last-child{flex:1;padding-left:4em;}
}


#contact{}
#contact .box div{display:flex;flex-direction:column;justify-content:center;gap:2em;}
#contact .box div p:has(a){flex:1;}
#contact p{margin:0;}
#contact .box a{display:block;padding:1em 0;border-radius:1em;text-align:center;color:#fff;font-size:var(--fs2);}
#contact .box .tel a{background:var(--main_color);}
#contact .box .tel a::before{content: '\f3cd';font-family: var(--faf);font-weight: 900;padding-right: 0.3em;}
#contact .box .form a{background:var(--sub_color);}
#contact .box .form a::before {content: '\f0e0';font-family: var(--faf);font-weight: 900;padding-right: 0.3em;}

@media (width >= 768px) {
	#contact .box div{flex-direction:row;}
}


footer p{margin:0;}
footer section{padding:4em 1em;}
footer section ul li p{margin:0;font-size:var(--fs3);font-weight:400;white-space:nowrap;}
footer li p.title{margin-bottom:1em;font-weight:700;}
footer .copy{padding:2em 0;text-align:center;background:#333;color:#ffff;}


@media (width >= 768px) {
	footer .box{display:flex;align-items:center;max-width:1100px;}
	footer section h2{width:120px;}
	footer section ul{display:flex;gap:2em;margin-left:auto;}
	footer section ul li{flex:1;}
}