/*End Generated Styles*/@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
/*** GENERAL STYLING **************************************/
html {
    scroll-padding-top: 80px;
}
body {
    color: #444;
}
body, #footer li a, #languages a, .page_title, #navigation, #content, .whatsnew_title, .whatsnew_date, #whatsnew_full_list, #whatsnew_full, a, #footer .copyright, #navigation ul.nav li a, #mainbody #whatsnew .page_title, #content p, #content pre, #contact_content_before div, #contact_form label, .contact_notice, #contact_content_before h2 {
    font-family: "Noto Sans JP", sans-serif;
}
#header h1, #header a, #header h2, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    font-family: "Noto Serif JP", serif;
}

#header h1 a, #header h2 {
    color: #fff;
    text-shadow: 3px 3px 5px #0a4b63, 5px 16px 10px rgba(17,69,88,0.8);
    transition: all 0.3s;
}
#header h1 a:hover {
    color: #d5eef7;
}

.img-left { float:left; margin:0 10px 10px 0; }
.img-right { float:right; margin:0 0 10px 10px; }
.center {text-align: center;}
@media only screen and (max-width: 560px) {
	.img-right, .img-left {
		float: none;
		display: block;
		margin: 10px auto;
	}
}

a {
    color: #226a97;
    transition: all 0.3s;
}
a:hover {
    color: #97c230;
}

.arrow-link:after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(/uploads/2025/04/09/circle-arrow-right.png) center/contain no-repeat;
    margin-left: 5px;
    filter: invert(30%) sepia(97%) saturate(398%) hue-rotate(158deg) brightness(99%) contrast(90%);
    transition: all 0.3s;
}
.arrow-link:hover:after {
    filter: invert(66%) sepia(84%) saturate(373%) hue-rotate(33deg) brightness(92%) contrast(90%);
}

.button,
button, input[type="button"] {
    font-family: "Noto Sans JP", sans-serif;
    display: inline-block;
    background-color: #226a97;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 0px 8px 8px 8px;
}
.button:hover,
button:hover, input[type="button"]:hover {
    background-color: #97c230;
    color: #fff;
    box-shadow: 0 10px 10px #ccc;
}

#navigation {
    position: sticky !important;
}

#header .webdexpress_header {
    background: linear-gradient(90deg, rgba(72,193,240,0) 0%, rgba(72,193,240,0.6) 40%, rgba(72,193,240,0.9) 100%);
}
body.sub-header-size .webdexpress_header {
    padding: 80px 10px!important;
}

#user_content {
    padding: 0 1em;
}

#mainbody {
    flex-direction: column;
}
#mainbody #content.whatsnew_present {
    max-width: 100%;
}
#mainbody #whatsnew {
    max-width: 100%;
    padding:0;
    margin-top: 3em;
}
#mainbody #whatsnew .webdexpress_whatsnew {
    background-color: #f1f5f7;
}
#mainbody #whatsnew .webdexpress_whatsnew .whatsnew_text,
#mainbody #whatsnew .webdexpress_whatsnew .whatsnew_text .whatsnew_title{
    text-align: left;
}
#mainbody #whatsnew .webdexpress_whatsnew .whatsnew_text:hover {
  background-color: transparent;
}
#mainbody #whatsnew .page_title {
    font-family: "Noto Serif JP", serif;
    text-align: left;
}
#mainbody #whatsnew .page_title #eco-leaf-icon {
    display: none;
}
#mainbody #whatsnew .webdexpress_whatsnew .whatsnew_text .whatsnew_title a:hover {
  text-decoration:none;
}

#content h3 {
    font-size: 28px;
    padding:25px 0 10px 30px;
    color: #000;
    margin: 40px 0 20px 0;
    position: relative;
    left: -15px;    
}
#content h3:nth-of-type(odd) {
    background: url(/uploads/2025/04/10/h3_bg01.gif) top left no-repeat;
}
#content h3:nth-of-type(even) {
    background: url(/uploads/2025/04/10/h3_bg02.gif) top left no-repeat;
}

#content h4 {
    font-size: 22px;
    font-weight: bold;
    color: #7f5013;
    position: relative;
    z-index: 0;
    margin: 2em 0 0.5em 0;
}
#content h4:after {
    content: '';
    width: 100px;
    height: 8px;
    background-color: #fff44e;
    display: block;
    position: absolute;
    bottom: 4px;
    z-index: -1;
    transform: rotate(-3deg);
}

#content ul ul {
    list-style-type: circle;
}
.page_title {
    text-align: center;
    border-bottom:1px solid #e2e8e8;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: normal;
    color: #555;
}

#content .emphasis {
    font-family: "Noto Serif JP", serif;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    margin:2.5em auto;
    padding:30px 20px;
    position: relative;
    z-index: 0;
}
#content .emphasis:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: #e9f7f7;
    position: absolute;
    top: 0;
    z-index: -1;
    transform: rotate(-2deg);
    left: 0;
}

/*** PAGES **************************************/
.home-service-wrap {
    display: flex;
    gap: 30px;
}
.home-service-wrap > div {
    width: calc(100% / 3);
    padding:20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    border-top:8px solid #a0d3d3;
    border-radius:5px 5px 0 0;
    text-align: center;
}
.home-service-wrap > div h4:before {
    content: '';
    display: block;
    width: 110px;
    height: 110px;
    margin:5px auto 15px auto;
}
.home-service-wrap > div:nth-of-type(1) h4:before {
    background: url(/uploads/2025/04/11/service-icon_team.png) center/contain no-repeat;
}
.home-service-wrap > div:nth-of-type(2) h4:before {
    background: url(/uploads/2025/04/11/service-icon_kom.png) center/contain no-repeat;
}
.home-service-wrap > div:nth-of-type(3) h4:before {
    background: url(/uploads/2025/04/11/service-icon_flower.png) center/contain no-repeat;
}
.home-service-wrap h4 {
    display: inline-block;
    margin: 0 0 5px 0!important;
}
.home-service-wrap h5 {
    color: #7f5013;
    margin-bottom: 20px;
}
.home-service-wrap p {
    text-align: left;
}
.home-service-wrap p.center {
    text-align: center;
}

.team-growth-wrap {
    display: flex;
    gap: 30px;
    margin-bottom: 2em;
}
.team-growth-wrap > div {
    width: calc(100% / 2);
    padding:20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    border-top:8px solid #a0d3d3;
    border-radius:5px 5px 0 0;
}
.team-growth-wrap h4 {
    margin: 0!important;
}
.team-growth-wrap img {
    width: 400px;
    margin:1em auto;
    display: block;
}

.session-detail {
    background-color: #f1f5e9;
    padding:20px;
    margin:0 0 2em 0;
    display: flex;
    gap:0 50px;
    flex-wrap: wrap;
}
.session-detail p {
    margin:0.5em 0 1em 0;
}

.session-detail .options {
    width: 100%;
}

.card-samples {
    text-align: center;
    margin-bottom: 2em;
}
.card-samples p {
    font-style: italic;
    margin:0;
    color: #666;
}
.card-samples img {
    width: 500px;
    margin-top: 20px;
}

.kom-table {
    border-collapse: collapse;
}
.kom-table th, .kom-table td {
    border:1px solid #ccc;
    padding:10px;
}
.kom-table th {
    background-color: #eff8f8;
}
.kom-table th:nth-of-type(1) {
    width: 150px;
}

#content .flower-img-wrap {
    list-style:none;
    margin:0;
    padding:0;
    display: flex;
    gap:10px;
    justify-content: center;
    text-align: center;
}

#content .client-voices {
    list-style:none;
    margin:0;
    padding:0 20px;
}
#content .client-voices li {
    margin:1em 0;
}
#content .client-voices li:before {
    content: '';
    display: inline-block;
    width: 31px;
    height: 28px;
    background:url(/uploads/2025/04/11/voice.png) center/contain no-repeat;
    margin-right: 10px;
}

@media only screen and (max-width: 834px) {
    .home-service-wrap,
    .team-growth-wrap {
        flex-wrap: wrap;
    }
    .home-service-wrap > div,
    .team-growth-wrap > div {
        width: 100%;
    }
}
@media only screen and (max-width: 660px) {
    .kom-table th:nth-of-type(1) {
        width: auto;
    }
    #content .flower-img-wrap {
        flex-wrap: wrap;
    }
    
}

/*** FORM **************************************/
.informakers-form label {
    display: block
}
.informakers-form .input {
    margin-bottom: 1.5em;
}

.informakers-form .error-message {
    color: red;
}

.informakers-form input[type="button"] {
    font-weight: bold;
}

input[type=text], input[type=password], input[type="tel"], input[type="number"], input[type="email"],
textarea, select {
	outline: none;
	border: #ccc 1px solid;
	padding: 10px;
	transition: all 0.3s;
	appearance: none;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
	border-radius:0;
	box-sizing: border-box;
}
input[type=text], input[type=password], input[type="tel"], input[type="number"], input[type="email"], textarea {
	width: 100%;
}
select {
	padding-right: 26px;
	margin: 3px 0;
	background: url(/uploads/2025/04/10/select-arrow.png) #fff right 5px center no-repeat;
	background-size: 12px 7px;
    color: #000
}

.contact-form-wrap .informakers-form,
.flower-form-wrap .informakers-form {
    display: flex;
    flex-wrap: wrap;
}
.contact-form-wrap .informakers-form .input,
.flower-form-wrap .informakers-form .input {
    margin: 1em 20px;
    width: calc(50% - 45px);
}
.contact-form-wrap .informakers-form .input:nth-of-type(2),
.contact-form-wrap .informakers-form .input:nth-of-type(7),
.flower-form-wrap .informakers-form .input:nth-of-type(6) {
    width: 100%;
}
.contact-form-wrap .g-recaptcha,
.contact-form-wrap #formSubmitButtonActive,
.flower-form-wrap .g-recaptcha,
.flower-form-wrap #formSubmitButtonActive {
    width: 100%;
    margin:1em 20px;
}