@charset "utf-8";

/* **************************************************
   ppap_wide.css
   Merged from:
     custom.css
     wide.css
***************************************************** */
:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
}
/* ===== Scrollbar (wide.css) ===== */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,.6);
}
html {
	  scroll-behavior: smooth;
}
/* ===== Box-sizing ===== */
#Contents * {
    box-sizing: border-box;
}

/* ===== Layout base ===== */
div#Contents,
.GridSet,
.Grid4 {
    width: 100%;
    margin: auto;
    overflow: visible;
}

/* wide.css: width; custom.css: padding:0 */
div.Section {
    width: 100%;
    padding: 0;
}

div.Section.Gray {
    background: var(--Gray2);
}

div.Section:before {
    content: "";
    display: block;
    clear: both;
    float: none;
}

/* custom.css padding(3em 0) wins over wide.css(2em 0) */
.Section>.Inner {
    width: var(--wide);
    margin: auto;
    padding: 3em 0;
    word-break: break-word;
}

.SubSection .Inner {
    margin: auto;
    max-width: var(--wide);
}

/* custom.css font-size(1.8em) wins over wide.css(2.2em); merged props */
.Section h2 {
    text-align: center;
    font-size: 1.8em;
    line-height: 1.1;
    color: var(--Black);
    font-weight: bold;
    padding: .5em 0;
}

.Section h2.mb0 {
    display: block;
}

.Section .TextStyle1 {
    color: var(--Black)
}

.Section .Inner h3 {
    background: transparent;
    border: none;
    font-size: 1.8em;
    text-align: center;
}

.Section h4::before {
    content: none;
}

.Section .Inner h3:after {
    content: "";
    display: block;
    float: none;
    clear: both;
}

/* ===== Sticky (custom.css) ===== */
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

span.Mobile {
    display: none;
}

/* ===== PageTitleStyle3 — merged ===== */
/* custom.css wins: background, height(500px), padding; wide.css adds margin-bottom:0 */
.PageTitleStyle3 {
    height: 500px;
    background: url("/-/media/ind/ppap/image/bg_branding.png") no-repeat center / 100%;
    padding: 5em 0;
    margin-bottom: 0;
}

/* wide.css: display/align-items/width; custom.css: flex-direction/background */
.PageTitleStyle3 .Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,.5);
    height: 100%;
}

/* custom.css wins: background(transparent), display(flex), flex-flow, align-items, justify-content */
.PageTitleStyle3 .Inner {
    width: 100%;
    max-width: var(--wide);
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    box-shadow: none;
    margin: auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
}

.PageTitleStyle3 .Inner div {
    display: flex;
    width: var(--wide);
    margin: auto;
    align-items: center;
}

/* custom.css second rule wins for color(var(--Yellow1))/font-size(5em)/text-shadow(none);
   first rule contributes padding/margin/text-align */
.PageTitleStyle3 .Inner h1 {
    width: inherit;
    font-weight: bold;
    font-size: 5em;
    color: var(--Yellow1);
    text-shadow: none;
    line-height: 1.2;
    box-sizing: border-box;
    padding: .15em 0;
    margin: 0;
    text-align: left;
}

.PageTitleStyle3 .Inner h1 span {
    font-size: .5em;
    display: flex;
    align-items: center;
    font-weight: normal;
    color: var(--White);
}

.PageTitleStyle3 .Inner h1 span::before {
    content: "";
    background: url(/-/media/ind/ppap/image/icon_ppap_gr.svg) no-repeat center / 59px 62px;
    display: block;
    width: 59px;
    min-width: 59px;
    height: 62px;
    margin: 0 .25em 0 0;
}

/* custom.css wins: font-size(1.85em), font-weight(normal), line-height(1.4), text-shadow(none), margin; wide adds width */
.PageTitleStyle3 .Inner .Read {
    width: var(--wide);
    font-size: 1.85em;
    font-weight: normal;
    line-height: 1.4;
    color: var(--White);
    margin: 1em 0;
    padding: 0;
    text-shadow: none;
}

.PageTitleStyle3 .Inner .Read strong {
    color: var(--White);
    background: linear-gradient(180deg, transparent 60%, rgb(205 226 94 / 40%) 40%);
}

/* ===== Grid4 InnerLink (custom.css) ===== */
.Grid4 .InnerLink {
    background: var(--Gray2);
    width: 100%;
    z-index: 2;
    margin: 0;
}
.Grid4 .InnerLink ul {
    max-width: var(--wide);
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: .5em 0;
		justify-content: center;
		gap: 1.5em;
}
.Grid4 .InnerLink a:link,
.Grid4 .InnerLink a:visited {
    color: var(--Black);
    font-size: 1.2em;
    padding: .5em;
    background: rgba(255,255,255,0);
    border-radius: 5px;
    transition: .08s ease-in;
}
.Grid4 .InnerLink a:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.6);
    color: var(--Black)
}
.Grid4 .InnerLink li {
    display: flex;
}

/* ===== Grid4 headings (custom.css) ===== */
.Grid4 h2 {
    background: var(--Yellow1);
    font-weight: normal;
    font-size: 2.2em;
    padding: .5em 0;
}
.Grad {
    background: transparent linear-gradient(115deg, var(--Gray1) 0%, var(--Gray2)100%) 0% 0% no-repeat padding-box;
}
.Grid4 .Grad h2 {
    color: var(--Black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    font-weight: bold;
    background: transparent;
}
.Grid4 .Grad h2::before {
    content: "";
    background: url(/-/media/ind/ppap/image/icon_ppap_ow.svg) no-repeat center / 50px 53px;
    width: 50px;
    min-width: 50px;
    height: 53px;
    margin: 0 .5em 0 0;
}
.Grid4 .Grad h3::before,
.Grid4 .Grad h3::after {
    content: "-";
    display: inline-flex;
    margin: 0 .5em;
}
.Grid4 .Grad h3 {
    background: var(--White);
    color: #9B0000;
    padding: .5em;
    border-radius: 10px;
}

/* ===== Ow (custom.css) ===== */
.Ow {
    background: #FFFFDB;
		background: var(--Gray1);
}
.Ow h2 {
    color: #444;
    font-size: 2em;
    text-align: center;
}
.Ow .TextStyle1 {
    color: var(--Black);
    font-size: 1.2em;
}

/* ===== InfoArea (custom.css) ===== */
.Grid4 .InfoArea {
    height: 9em;
    overflow-y: auto;
    background: #0000001A;
    border-radius: 5px;
    padding: 1em;
}
.Grid4 .InfoArea li {
    display: flex;
    align-items: center;
}
.Grid4 .InfoArea li span {
    margin: 0 2em 0 0;
    min-width: 6em;
}
.Grid4 .InfoArea li.Info:before {
    content: "ãç¥ãã";
    background: var(--White);
    color: var(--Black);
    border-radius: 5px;
    padding: .15em .5em;
    margin: .5em 2em .5em .5em;
    min-width: 4em;
}
.Grid4 .InfoArea li.News:before {
    content: "ãã¥ã¼ã¹";
}

/* ===== Flexbox (wide.css base + custom.css additions) ===== */
.Flexbox {
    display: flex;
    align-items: center;
}
.Flexbox.Top {
    align-items: flex-start;
}
.Flexbox.Wrap {
    flex-wrap: wrap;
}
.Flexbox.Between {
    justify-content: center; /* 左寄せから中央寄せに変更 */
    gap: 2em; /* 1つ追加：要素同士の間隔を調整（お好みでサイズを変更してください） */
    align-items: stretch;
}
.Flexbox.Column {
    flex-flow: column;
}
.Flexbox.Reverse {
    flex-flow: row-reverse;
}
.Flexbox.Two div,
.Flexbox.Two li {
    width: calc((100% / 2) - 1em);
}
.Flexbox.Two div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* wide.css sets width for .Flexbox .Three as part of multi-selector */
.Flexbox.Three div,
.Flexbox.Three li,
.Flexbox .Three {
    width: calc((100% / 3) - 1em);
}
.Flexbox.Four div,
.Flexbox.Four li {
    width: calc((100% / 4) - 1em);
}
.Flexbox .TwoThirds {
    width: calc(((100% / 3) * 2) - 1em);
}

/* custom.css: additional styling for .Flexbox .Three */
.Flexbox .Three {
    background: #fff url(/-/media/ind/ppap/image/icon_worry.svg) no-repeat 96% 96%;
    border-radius: 10px;
    color: var(--Black);
    font-size: 1.6em;
    font-weight: bold;
    padding: 2em 1em;
    margin: 0 1em 0 0;
    display: flex;
    align-items: center;
    position: relative;
}
.Flexbox .Three::after {
    content: "";
    position: absolute;
    right: -16px;
    display: block;
    width: 18px;
    height: 16px;
    background: url(/-/media/ind/ppap/image/icon_fukidashi.svg) no-repeat center / 18px 16px;
}
.Grad .TwoThirds {
    background: var(--Yellow1);
    border-radius: 10px;
}
.Flexbox .TwoThirds li {
    font-size: 1.25em;
    display: flex;
    margin: 1em;
}
.Flexbox .TwoThirds li::before {
    content: "";
    background: url(/-/media/ind/ppap/image/icon_ppap_gr.svg) no-repeat center / 30px 31px;
    display: block;
    width: 30px;
    min-width: 30px;
    height: 31px;
    margin: 0 .5em 0 0;
}

/* ===== Service (custom.css) ===== */
.Service .Flexbox.Two ul {
    margin: 2em 0;
}
.Service .Flexbox.Two h3 {
    color: var(--Black);
    border-radius: 10px;
    padding: .5em 0;
    margin: 0 0 1em;
}
.Service .Flexbox.Two .Mail h3 {
    background: var(--Blue1)
}
.Service .Flexbox.Two .HENNGE h3 {
    background: var(--Green3);
		color: var(--White);
}
.Service .Flexbox.Two li {
    font-size: 1.25em;
    font-weight: bold;
    width: 100%;
    margin: 0 0 1.5em;
    display: flex;
}
.Service .Flexbox.Two li span {
    font-size: .7em;
    text-align: right;
    font-weight: normal;
    display: contents;
}
.Service .Flexbox.Two li:before {
    content: "";
    min-width: 94px;
    height: 74px;
    margin: 0 .5em 0 0;
    display: block;
}
.Service .Flexbox.Two .Mail li:nth-of-type(1):before {
    background: url(/-/media/ind/ppap/image/icon_mail01.svg) no-repeat left top / 81px 66px;
}
.Service .Flexbox.Two .Mail li:nth-of-type(2):before {
    background: url(/-/media/ind/ppap/image/icon_mail02.svg) no-repeat left top / 91px 69px;
}
.Service .Flexbox.Two .Mail li:nth-of-type(3):before {
    background: url(/-/media/ind/ppap/image/icon_mail03.svg) no-repeat left top / 70px 66px;
}
.Service .Flexbox.Two .HENNGE li:nth-of-type(1):before {
    background: url(/-/media/ind/ppap/image/icon_henng01.svg) no-repeat left top / 81px 66px;
}
.Service .Flexbox.Two .HENNGE li:nth-of-type(2):before {
    background: url(/-/media/ind/ppap/image/icon_hennge02.svg) no-repeat left top / 91px 69px;
}
.Service .Flexbox.Two .HENNGE li:nth-of-type(3):before {
    background: url(/-/media/ind/ppap/image/icon_hennge03.svg) no-repeat left top / 76px 74px;
}

/* ===== Section.Step (custom.css) ===== */
.Section.Step .Inner h3 {
    color: var(--Black);
    border-radius: 10px;
}
.Section.Step .Inner h3.Mail {
    background: var(--Blue1);
}
.Section.Step .Inner h3.HENNGE {
    background: var(--Green3);
		color: var(--White);
}
.Grid4 .Section.Last {
    padding: 0;
}
.Section .Inner .TextStyle1 {
    font-size: 1.4em;
    line-height: 1.65;
}

/* ===== Button (custom.css) ===== */
.Button:link,
.Button:visited {
    display: block;
    text-decoration: none;
    color: var(--Black);
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    width: 100%;
    padding: 1em;
    margin: 1em auto;
    border-radius: 10px;
    background: var(--Yellow1);
    opacity: 1;
    transition: .08s ease-in;
}
.Button:hover {
    opacity: .8;
}

/* ===== Section.Features (custom.css) ===== */
.Section.Features h3 {
    color: var(--Black);
    padding: 0;
    margin: 1em 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 0;
}
.Section.Features h3::before {
    content: "";
    width: 39px;
    height: 64px;
    display: block;
    border-radius: 10px;
    margin-right: -.5em;
}
.Section.Features .Mail h3::before {
    background: var(--Blue1)
}
.Section.Features .HENNGE h3::before {
    background: var(--Green3);
}
.Section.Features .Flexbox li:nth-of-type(1) {
    margin: 0 1em 0 0;
}
.Features .Flexbox .TwoThirds {
    margin: 0;
}
.Section.Features dt h3 {
    border: none;
    background: var(--Blue1);
    color: var(--Black);
    padding: .5em;
    border-radius: 10px;
}
.Section.Features dt h3::before {
    content: none;
}

/* ===== Part (custom.css) ===== */
.Part {
    padding: 2em 0;
}
.Part h4 {
    font-size: 1.4em;
    margin: 0 0 1em;
}
.Part h5 {
    background-color: transparent;
    font-size: 1.3em;
    color: #666;
    padding: 0;
}
.Part dl {
    max-width: var(--wide);
    padding: 2em 0;
    margin: 0 auto;
}
.Part dl:after {
    content: "";
    border-bottom: dotted 8px #ceceaf;
    display: inherit;
    margin: 2em 0 0;
}
.Part dl:last-child::after {
    content: none;
}
.Part dt {
    font-size: 1.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    z-index: 0;
    position: relative;
    margin: 0 0 1em;
}
.Features .Flexbox .TwoThirds li:nth-of-type(1),
.Features .Flexbox .TwoThirds li {
    margin: 0 0 .5em;
}
.Features .Flexbox .TwoThirds li::before {
    content: none;
}
.Part dd ul li {
    font-size: 1.2em;
}
.Part dt span {
    color: #FFFFDB;
    font-size: 1.6em;
    min-width: 77px;
    min-height: 77px;
    max-height: 77px;
    border-radius: 50%;
    text-align: center;
    line-height: 1.8;
    margin: 0 0 0 -.25em;
    z-index: -1;
}
.Mail .Part dt span {
    background: var(--Blue1)
}
.HENNGE .Part dt span {
    background: var(--Green3);
}

/* ===== TableStyle3 (custom.css) ===== */
.TableStyle3,
.TableStyle3 th,
.TableStyle3 td {
    border-collapse: separate;
    border: 4px solid var(--White);
}
.TableStyle3 td {
    background: #EFEFEF;
    font-size: 1em;
}
.TableStyle3 td span {
    display: block;
    font-size: .8em;
    line-height: 1;
}
.TableStyle3 tr:nth-of-type(1) th {
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
}
.TableStyle3 th:nth-of-type(1) {
    background: var(--Yellow1);
    width: 30%;
    font-size: 1em;
}
.TableStyle3 tr:nth-of-type(3) th, .TableStyle3 tr:nth-of-type(3) td,
.TableStyle3 tr:nth-of-type(4) th, .TableStyle3 tr:nth-of-type(4) td,
.TableStyle3 tr:nth-of-type(5) th, .TableStyle3 tr:nth-of-type(5) td,
.TableStyle3 tr:nth-of-type(6) th, .TableStyle3 tr:nth-of-type(6) td {
    color: #001aa3;
    font-weight: bold;
}
.TableStyle3 tr:nth-of-type(1) th:nth-of-type(1) {
    background-color: transparent;
}
.TableStyle3 tr:nth-of-type(1) th:nth-of-type(2) {
    background: var(--Green3);
		color: var(--White);
    padding: 1em;
}
.TableStyle3 tr:nth-of-type(1) th:nth-of-type(3) {
    background: var(--Blue1);
    padding: 1em;
}

/* ===== ServiceInfo (custom.css) ===== */
.Section.ServiceInfo .Inner h3 {
    color: var(--Black);
    text-align: left;
    margin: .5em 0;
    padding: 0;
}
.Section.ServiceInfo a:link,
.Section.ServiceInfo a:visited {
    color: #444;
    font-size: 1.2em;
}

/* ===== Contact — merged ===== */
/* custom.css margin(4em auto) wins over wide.css(6em auto 1em) */
.Contact {
    margin: 4em auto;
}

/* wide.css: width/display/margin + custom.css: font-size */
.Contact .TextStyle1 {
    width: 720px;
    display: block;
    margin: auto;
    font-size: inherit;
}

/* custom.css wins: background(var(--Red2)), font-size(1.4em), width(600px), border-radius(5px)
   wide.css contributes: display/flex props, text-decoration, padding, box-shadow, transition */
.Contact a:link,
.Contact a:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--White);
    width: 600px;
    background: var(--Red2);
    text-align: center;
    font-weight: bold;
    font-size: 1.4em;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    box-sizing: border-box;
    padding: 1em 0;
    margin: 1em auto;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transition: .08s ease-in;
}

.Contact a:before {
    content: none;
}

.Contact a:hover {
    box-shadow: 0 5px 10px 2px rgba(0,0,0,.3);
}

/* ===== Grid4 ColumnOneThird (wide.css) ===== */
.Grid4 .ColumnOneThird {
    width: calc((100% / 3) - 10.5px);
    margin: 0 0 0 15px;
    padding: 0em;
    box-sizing: border-box;
    float: left;
    transition: .08s ease-in;
}
.Grid4 .ColumnSet .ColumnOneThird:nth-of-type(1) {
    margin: 0;
}

/* ===== Animation (wide.css) ===== */
@keyframes SlideUp {
    0% { opacity: 0; margin-top: 100%; }
    100% { opacity: 1; margin-top: 0%; }
}
@keyframes Toggle {
    0% { height: 0; }
    100% { height: 100%; }
}

/* ===== Responsive ===== */
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.Under1305 #Contents {
		padding-left: 0;
		padding-right: 0;
	}
	.OptionWideRWD .GridSet {
		max-width: inherit;
	}
	.OptionWideRWD .PageTitleStyle3 .Inner {
		padding: 0 1rem;
		width: 100%;
	}
	.OptionWideRWD .PageTitleStyle3 .Inner .Read {
		width: 100%;
	}
	.OptionWideRWD .GridSet .Section .Inner {
		padding: 2rem 1rem;
		width: 100%;
	}
}
@media screen and (max-width: 1366px) {
    /* custom.css */
    .PageTitleStyle3 {
        background-size: auto 100%;
    }
}

@media screen and (max-width: 1024px) {
    /* custom.css */
    .PageTitleStyle3 .Inner h1 {
        margin: auto;
    }
    .PageTitleStyle3,
    .PageTitleStyle3 .Inner {
        height: 500px;
    }
}

@media screen and (max-width: 994px) {
    /* wide.css: #Contents / Grid4 */
    .JS #Contents,
    .JS .Grid4 {
        padding: 0;
        margin: 0;
        width: auto;
    }
    /* custom.css overrides GridSet margin */
    .JS .GridSet {
        padding: 0;
        margin: 0 -15px 0 0;
        width: auto;
        max-width: 100%;
    }
    /* wide.css */
    .JS .Inner {
        padding: 1em;
        width: auto;
    }
    /* merged: wide(line-height) + custom(font-size) */
    .JS .PageTitleStyle3 h1 {
        line-height: 1.2;
        font-size: 2.8em;
    }
    .JS .PageTitleStyle3 .Read {
        width: auto;
    }
    .JS .ColumnSet {
        margin: 0;
    }
    /* custom.css */
    .JS br.PC,
    .JS .Section br.PC {
        display: none;
    }
    .JS .PageTitleStyle3 .Wrapper {
        background-size: 100%;
    }
    .JS .PageTitleStyle3 .Inner {
        width: 100%;
        padding: 3em 1em;
    }
    .JS .PageTitleStyle3,
    .JS .PageTitleStyle3 .Inner {
        margin-top: 0;
    }
    .JS .PageTitleStyle3 .Inner h1 span {
        font-size: .8em;
        margin: 0 0 .5em;
    }
    .JS .PageTitleStyle3 .Inner .Read {
        font-size: 1.6em;
    }
    .JS .PageTitleStyle3 .Inner div,
    .JS .PageTitleStyle3 .Inner div h1,
    .JS .PageTitleStyle3 .Inner div .Read {
        width: auto;
        display: block;
    }
    .JS .Section>.Inner {
        padding: 2em 1em;
    }
    .JS .Section h2 {
        font-size: 1.8em;
    }
    .JS .Grid4 .InnerLink {
        margin: 0;
    }
    .JS .Grid4 .InnerLink a:link {
        font-size: 1em;
        padding: .5em;
    }
    .JS .Service .Flexbox.Two h3 {
        padding: .5em;
    }
    .JS .Flexbox .TwoThirds li p {
        font-size: 1.2em;
        line-height: 1.2;
        width: 100%;
        margin: 0 0 1em;
    }
    .JS .Part {
        padding: 2em 1em;
    }
    .JS .Grid4 .Grad h3::before,
    .JS .Grid4 .Grad h3::after {
        content: none;
    }
}

@media screen and (max-width: 767px) {
    /* wide.css */
    .JS .PageTitleStyle3 h1 {
        font-size: 1.6em;
    }
    .JS .PageTitleStyle3 .Read {
        font-size: 1.4em;
    }
    .JS .Section h2 {
        font-size: 1.4em;
    }
    /* custom.css font-size(1.6em) wins over wide.css(1.4em) */
    .JS .Section .Inner h3 {
        font-size: 1.6em;
        text-align: left;
    }
    .JS .Flexbox.Two {
        flex-flow: column;
    }
    .JS .Flexbox.Two div,
    .JS .Flexbox.Two li {
        width: auto;
    }
    .JS .Contact a:link,
    .JS .Contact a:visited,
    .JS .Contact .TextStyle1 {
        width: auto;
        justify-content: flex-start;
    }
    /* custom.css font-size(1.2em) wins over wide.css(1.6em) */
    .JS .Contact a:link,
    .JS .Contact a:visited {
        font-size: 1.2em;
        justify-content: center;
    }
    .JS .Grid4 .ColumnSet .ColumnOneThird:nth-of-type(1),
    .JS .Grid4 .ColumnOneThird {
        width: 100%;
        float: none;
        margin: 0 0 1em;
    }
    /* custom.css */
    .JS br.RWD {
        display: none;
    }
    .JS span.Mobile {
        display: block;
        width: 9em;
        background: var(--Black);
        color: var(--White);
        font-size: .8em;
        padding: .2em .3em;
        margin: .2em 0 auto auto;
        text-align: right;
        border-radius: 2px;
    }
    .JS .Section>.Inner {
        padding: 1em;
    }
    .JS .PageTitleStyle3,
    .JS .PageTitleStyle3 .Inner {
        height: auto;
    }
    .JS .PageTitleStyle3 .Inner {
        padding: 1em;
    }
    .JS .PageTitleStyle3 .Inner h1 {
        font-size: 1.8em;
    }
    .JS .PageTitleStyle3 .Inner .Read {
        font-size: 1.4em;
    }
    .JS .InnerLink ul {
        width: auto;
    }
    .JS .Section .Flexbox .TextStyle1 {
        width: auto;
        max-width: inherit;
    }
    .JS .Button:link,
    .JS .Button:visited {
        width: 80%;
        margin: auto auto 2em;
    }
    .JS .Contact a:before {
        content: none;
    }
    .JS .Ow .TextStyle1 {
        font-size: 1em;
    }
    .JS .Contact {
        margin: 1em;
    }
}

@media screen and (max-width: 579px) {
    /* custom.css */
    .JS .PageTitleStyle3 {
        background-color: var(--White);
    }
    .JS .PageTitleStyle3 .Inner {
        justify-content: space-around;
    }
    .JS .PageTitleStyle3 .Inner h1,
    .JS .PageTitleStyle3 .Inner .Read {
        margin: 0;
        width: 100%;
        max-width: inherit;
    }
    .JS .Grid4 .InfoArea li {
        flex-wrap: wrap;
    }
    .JS .Grid4 .InfoArea li a {
        width: 90%;
        margin: auto;
    }
    .JS .Flexbox {
        flex-flow: column;
    }
    .JS .Flexbox .TwoThirds {
        width: auto;
        margin: 1em auto;
    }
    .JS .Flexbox .Three {
        width: auto;
        margin: auto auto 1em;
    }
    .JS .Flexbox .Three::after {
        transform: rotate(90deg);
        bottom: -16px;
        right: inherit;
    }
    .JS .Section.Step .Inner h3 {
        padding: .5em;
    }
    .JS table th, .JS table td {
        font-size: 1em;
    }
    .JS .Grid4 .Section.Last {
        padding: 0;
    }
    .JS .Section .Inner .TextStyle1 {
        font-size: 1.2em;
    }
    .JS .Grid4 .Grad h2 {
        text-align: left;
    }
    .JS .Part dt {
        justify-content: center;
    }
    .JS .Part h4 {
        font-size: 1.2em;
    }
    .JS .Service .Flexbox.Two li {
        line-height: 1.4;
    }
}

@media screen and (max-width: 479px) {
    /* custom.css */
    .JS .Grid4 .InnerLink ul {
        flex-wrap: wrap;
    }
    .JS .PageTitleStyle3 .Wrapper {
        background-size: auto 100%;
        background-position: 70% 50%;
    }
    .JS .PageTitleStyle3 .Inner h1 {
        font-size: 2em;
    }
    .JS .PageTitleStyle3 .Inner .Read {
        font-size: 1em;
    }
    .JS .PageTitleStyle3 .Contact a:link,
    .JS .PageTitleStyle3 .Contact a:visited,
    .JS .PageTitleStyle3 .Contact .TextStyle1 {
        width: 300px;
    }
    .JS .Flexbox li {
        width: 90%;
    }
    .JS .Section .Inner .TextStyle1 {
        margin-bottom: 1em;
    }
    .JS .Flexbox.Three {
        flex-direction: column;
    }
    .JS .Flexbox.Three li {
        height: 18em;
        min-height: 13em;
        width: auto;
        margin: 0 0 1em;
        justify-content: center;
    }
    .JS .Contact a:link,
    .JS .Contact a:visited {
        padding: 1em;
        font-size: 1em;
    }
    .JS .Grid4 .InfoArea li {
        flex-wrap: wrap;
    }
    .JS .Grid4 .Section h2 {
        text-align: left;
        padding: .5em;
				width: 100%;
				margin: 0;
    }
}