/*
Theme Name:   Ultimate Pro school Child
Theme URI:    https://www.themehorse.com/themes/ultimate-pro
Description:  Twenty Fifteen Child Theme
Author:       arc
Author URI:   http://arc.ac.jp
Template:     ultimate-pro
Version:      1.0.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, news, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-logo, custom-menu, featured-image-header, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: ultimate-pro
*/
/*         ====== BREAKPOINTS ======
    +----------------+-----------+-----------+
    |                | テーマ      | 自分      |
    +----------------+-----------+-----------+
    | Smartphone XL  | 767px     | 767px     |
    +----------------+-----------+-----------+
    | Tablet (own)   | -         | 1024px    |
    +----------------+-----------+-----------+
    | Tablet (theme) | 1078px    | -         |
    +----------------+-----------+-----------+
    | Desktop        | -         | 1280px    |
    +----------------+-----------+-----------+
*/


/**
 * Website wide basic styles
 * @author Carneros Sergi
 */
body {
    font-family: 'Noto Sans', sans-serif; /* recommended font to manage multiple languages */
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
}

h1 {
    font-size: 1.625rem; /* 26px */
    line-height: 2rem; /* 32px */
    margin-top: 1.2rem;
    margin-bottom: 1.375rem; /* 22px */
    font-weight: 500;
}

h2 {
    font-size: 1.375rem; /* 22px */
    line-height: 1.75rem; /* 28px */
    margin-top: 0.8rem !important;
    margin-bottom: 1.25rem !important; /* 20px */
    font-weight: 400;
}

h3 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5rem; /* 24px */
    margin-top: 0.6rem;
    margin-bottom: 1.125rem; /* 18px */
    font-weight: 400;
}

h4 {
    font-size: 1rem; /* 16px */
    line-height: 1.25rem; /* 20px */
    margin-top: 0.6rem;
    margin-bottom: 1rem; /* 16px */
    font-weight: 400;
}

h5 {
    font-size: 0.875rem; /* 14px */
    line-height: 1.125rem; /* 18px */
    margin-top: 0.5rem;
    margin-bottom: 0.875rem; /* 14px */
    font-weight: 400;
}

h6 {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
    margin-top: 0.5rem;
    margin-bottom: 0.75rem; /* 12px */
    font-weight: 400;
}

p {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5rem; /* 24px */
    margin-bottom: 1rem; /* 16px */
    font-weight: 300;
    color: #666;
}

blockquote {
    font-size: 1rem; /* 16px */
    line-height: 1.75rem; /* 28px */
    margin: 1.5rem 0;
    padding: 1.1rem 1.85rem;
    border-left: 4px solid #ccc;
    color: #555;
    border-radius: 4px;
}

pre {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

code {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

th {
    background-color: #e0e0e0;
}

hr {
    color: #eee;
    border-color: #eee;
    background-color: #eee;
}

.gallery {
    margin: 1.4rem auto !important;
}

/* Smartphone XL and up */
@media (min-width: 767px) {

    h1 {
        font-size: 2rem; /* 32px */
        line-height: 2.375rem; /* 38px */
        margin-top: 3rem; /* 48px */
    }

    h2 {
        font-size: 1.625rem; /* 26px */
        line-height: 2rem; /* 32px */
        margin-top: 2.5rem !important; /* 40px */
    }

    h3 {
        font-size: 1.375rem; /* 22px */
        line-height: 1.75rem; /* 28px */
        margin-top: 2rem; /* 32px */
    }

    h4 {
        font-size: 1.125rem; /* 18px */
        line-height: 1.5rem; /* 24px */
        margin-top: 1.75rem; /* 28px */
    }

    h5 {
        font-size: 1rem; /* 16px */
        line-height: 1.25rem; /* 20px */
        margin-top: 1.5rem; /* 24px */
    }

    h6 {
        font-size: 0.875rem; /* 14px */
        line-height: 1.125rem; /* 18px */
        margin-top: 1.375rem; /* 22px */
    }

    p {
        font-size: 0.875rem; /* 14px */
        line-height: 1.5rem; /* 24px */
    }
}

#arcDefaultTemplate, #arcWideTemplate {
    margin-right: 15px;
    margin-left: 15px;
}

#arcDefaultTemplate h1:first-child, #arcDefaultTemplate h2:first-child,
#arcDefaultTemplate h3:first-child, #arcDefaultTemplate h4:first-child,
#arcDefaultTemplate h5:first-child, #arcDefaultTemplate h6:first-child {
    margin-top: 0 !important;
}

#arcWideTemplate h1:first-child, #arcWideTemplate h2:first-child,
#arcWideTemplate h3:first-child, #arcWideTemplate h4:first-child,
#arcWideTemplate h5:first-child, #arcWideTemplate h6:first-child {
    margin-top: 0 !important;
}

/* apply list styles only to templates (avoids the break of menu and header) */
#arcDefaultTemplate ol, #arcDefaultTemplate ul,
#arcWideTemplate ol, #arcWideTemplate ul {
    margin-left: 2rem;
    margin-bottom: 1.25rem;
    list-style-position: outside;
}

#arcDefaultTemplate ol,
#arcWideTemplate ol {
    list-style-type: decimal;
}

#arcDefaultTemplate ul,
#arcWideTemplate ul {
    list-style-type: disc;
}

#arcDefaultTemplate li,
#arcWideTemplate li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    line-height: 1.5;
    position: relative;
}

#arcDefaultTemplate ol li::marker,
#arcWideTemplate ol li::marker {
    font-size: 1rem; /* bullet size */
}

/* hide Google Captcha badge site-wide */
.grecaptcha-badge { 
    visibility: hidden; 
}


/**
 * Fix header styles
 * @author Carneros Sergi
 */
#branding .hgroup-wrap {
    padding: 15px 20px;
}

#branding .hgroup-wrap > .container {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#branding #site-logo,
#branding #site-title {
    margin: 0 !important;
    order: 1;
}

#branding #site-title img {
    height: 60px;
}

#branding .hgroup-right {
    display: flex;
    justify-content: right;
    align-items: center; 
    margin-left: auto;
    order: 2;
}

#branding .hgroup-right .langgage {
    display: none;
}

#branding .hgroup-right .menu-toggle {
    margin: 0.6rem;
}

/* Smartphone XL and up */
@media (min-width: 767px) {

    #branding #site-title img {
        height: 80px;
    }

    #branding .hgroup-right {
        min-width: 0;
        padding: 0;
    }

    #branding .hgroup-right .langgage {
        display: inline-block;
        margin-right: 2.8rem;
    }

    #branding .hgroup-right .search-toggle {
        margin: 0.6rem;
    }
}

/* Smaller than Smartphone XL */
@media (max-width: 767px) {

    #branding #search-box {
        display: none;
    }
}

/* access = main menu */
#access .container {
    width: 100%;
}

#access .container, 
#access .container::before, #access .container::after {
    box-sizing: content-box;
}

/* remove page title margin */
.page-title {
    margin: 0 !important;
}


/**
 * Styles for templates and plugins
 * @author Carneros Sergi
 */
 #arcDefaultTemplate {
    max-width: 1024px; /* .cs-container-lg size */
    padding: 1.8rem 0;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Smartphone XL and up */
@media (min-width: 767px) {

    #arcDefaultTemplate {
        padding: 2.6rem 0;
    }
}

/* Tablet (theme) and up */
@media (min-width: 1078px) {

    #arcDefaultTemplate {
        padding: 3.2rem 0;
    }
}

.cs-container, .cs-container-lg, .cs-container-md {
    margin: 0 auto !important;
}

.cs-container {
    max-width: 1280px;
}

.cs-container-lg {
    max-width: 1024px;
}

.cs-container-md {
    max-width: 768px;
}

#arcDefaultTemplate::after,
.cs-container::after, .cs-container-lg::after, .cs-container-md::after {
    content: "";
    display: table;
    clear: both;
}

.cs-border-solid {
    border-style: solid;
    border-width: 1px;
}

/* Fix Visual Composer space problem */
.vc_section {
    width: 100%;
    padding: 0 !important;
    margin: 0  auto !important;
    box-sizing: border-box;
}

/* Fix Visual Composer not using correct paddings */
.vc_column_container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Fix visual composer small icons too spaced */
.vc_icon_element-size-sm {
    width: 3em !important;
    height: 3em !important;
}

/* Fix imagegrid added margin */
.wpb_image_grid_ul {
    margin: 0 !important;
}


/**
 * Styles for pages
 * @author Carneros Sergi
 */
.cs-main-alert h1, .cs-main-alert h2,
.cs-main-alert h3, .cs-main-alert h4,
.cs-main-alert h5, .cs-main-alert h6 {
    margin-bottom: 0.5rem !important;
}

/*.cs-main-alert {
    display: none;
}*/

.cs-main-slider {
    overflow: hidden;
}

/* TODO
    .cs-bg-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: red;
        z-index: 1;
    }

    .cs-bg-overlay {
        position: relative;
        z-index: 2;
    }
*/


/**
 * Fix footer styles
 * @author Carneros Sergi
 */
#colophon h1, #colophon h2, #colophon h3,
#colophon h4, #colophon h5, #colophon h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/**
 * Styles for forms (Contact Form 7 plugin)
 * @author Carneros Sergi
 */
.wpcf7-not-valid-tip {
    display: inline-block;
    margin-top: 0.4rem;
    margin-left: 0.5rem;
}

.wpcf7-submit {
    margin: 0 !important;
}

.wpcf7-response-output {
    color: #dc2626;
    border: none !important;
    border-radius: 0.2rem;
    padding: 0.8rem 1.2rem !important;
    margin: 0.2rem 0.5rem !important;
    background-color: #fecaca;
}

.cs-flex {
    display: flex;
}

.cs-flex div {
    padding: 0.2rem 0.5rem;
}

.cs-w-50 {
    width: 50%;
}

.cs-w-full {
    width: 100%;
}

#csApplyForm > .cs-form-section {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin: 2rem 0;
}

#csApplyForm > .cs-form-section:first-child {
    margin-top: 0;
}

#csApplyForm > .cs-form-section:last-child {
    border: none;
    padding-bottom: 0;
}

#csApplyForm label {
    display: inline-block;
    margin: 0 0 0.4rem 0.3rem;
}

#csApplyForm select {
    width: 100%;
}

#csApplyForm .cs-submit-button p {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: -72px; /* center the button (spinner total width 72px) */
    margin-bottom: 1.6rem;
}

#csApplyForm .cs-submit-button .wpcf7-spinner {
    width: 24px;
    margin: 0 24px; /* total width 72px (24px * 3) */
}
























/* NEW POSTS */
#arcPost {
    padding-bottom: 6rem;
    background-color: #f3f4f6;
}

#arcPost .cs-post-header {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url('resources/patterns/endless-clouds.svg');
    background-size: 180px;
    background-repeat: repeat;
    background-color: #0071a2;
}

/* Tablets and up (theme breakpoints) */
@media (min-width: 767px) {

}

/* cs-container-lg breakpoint */
@media(min-width: 1024px) {
    
    #arcPost .cs-post-header {
        /* height: 620px; */
        height: 480px;
    }
}

#arcPost .cs-post-header img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
}

#arcPost .cs-post-header-content {
    width: 100%;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1.2rem 2rem;
    border-radius: 3px;
    box-sizing: border-box;
    /* background-color: rgba(0, 0, 0, 0.7); */
    background-color: rgb(0, 137, 208, 0.7);
}

/* cs-container-lg breakpoint */
@media(min-width: 1024px) {
    
    #arcPost .cs-post-header-content {
        bottom: 300px;
    }
}

#arcPost .cs-post-header-content h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #fff;
    font-weight: 600;
    margin-top: 0;
}

#arcPost .cs-post-header-content p,
#arcPost .cs-post-header-content a {
    color: #9ca3af;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

#arcPost .cs-post-header-content a:hover {
    color: #fff;
}

#arcPost .cs-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#arcPost .cs-post-meta div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#arcPost .cs-post-meta .cs-post-meta-icon {
    width: 1em; /* same size as text */
    height: 1em; /* same size as text */
    fill: currentColor;
    margin-right: 0.5em;
    margin-bottom: 0.2em; /* fix icon alignment */
}

#arcPost .cs-post {
    position: relative;
    padding: 2.5rem;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* cs-container-lg breakpoint */
@media(min-width: 1024px) {

    #arcPost .cs-post {
        margin-top: -260px !important;
    }
}