* {
    box-sizing:border-box
}
body {
    margin:0;
    color:#24211e;
    background:#fff;
    font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif
}
button {
    font:inherit;
    cursor:pointer
}
a {
    color:inherit
}
button:focus-visible,a:focus-visible {
    outline:3px solid #215acb;
    outline-offset:5px
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
}
.skip {
    position:absolute;
    top:-60px
}
.skip:focus {
    top:0;
    z-index:20;
    background:white;
    padding:12px
}
.site-header {
    background:#fff url(header-stripe.png) repeat-x top;
    background-size:150px 7px;
    padding-top:15px
}
.header-inner {
    max-width:1000px;
    margin:auto;
    min-height:84px;
    padding-top:11px
}
.header-inner img {
    display:block;
    width:345px;
    height:auto
}
.menu-toggle {
    display:none
}
.site-header nav {
    background:#fbbf39
}
.site-header nav>div {
    max-width:1000px;
    margin:auto;
    display:flex
}
.site-header nav a {
    position:relative;
    width:12.5%;
    text-decoration:none;
    text-align:center;
    font-weight:700;
    font-size:14px;
    line-height:42px;
    white-space:nowrap
}
.site-header nav a:nth-child(7) {
    font-size:12px
}
.site-header nav a:before {
    content:'';
    height:21px;
    border-left:1px dashed #333;
    position:absolute;
    left:0;
    top:11px
}
.site-header nav a:last-child:after {
    content:'';
    height:21px;
    border-right:1px dashed #333;
    position:absolute;
    right:0;
    top:11px
}
.site-header nav a:hover {
    background:#ffffff50
}
main {
    max-width:1440px;
    margin:auto
}
.hero {
    position:relative;
    overflow:hidden;
    width:min(100%,1440px);
    aspect-ratio:1440/720;
    margin:0 auto
}
.hero img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    max-width:none
}
.intro {
    text-align:center;
    font-size:20px;
    font-weight:700;
    margin:45px 20px 70px;
    line-height:1.9
}
.mobile-only {
    display:none
}
.interactive {
    max-width:1050px;
    margin:auto
}
.hint {
    text-align:center;
    color:#777;
    font-size:13px;
    margin:0 15px 12px
}
.flower {
    position:relative;
    width:100%;
    aspect-ratio:2340/1660;
    margin:auto
}
.flower-art {
    position:absolute;
    width:100%;
    height:auto;
    left:0;
    top:0;
    clip-path:inset(0 0 11%);
    transition:opacity .2s
}
.flower.has-selection .flower-art {
    opacity:.25
}
.promise {
    position:absolute;
    width:23.8%;
    aspect-ratio:1;
    border:0;
    border-radius:50%;
    background:transparent;
    color:transparent;
    padding:0;
    display:grid;
    place-content:center;
    z-index:2
}
.promise span {
    font-size:clamp(28px,6vw,70px);
    font-weight:700;
    letter-spacing:.03em
}
.promise i {
    margin:0 auto;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:6px solid transparent
}
.promise:hover {
    box-shadow:0 0 0 4px #00000015
}
.promise.selected {
    background:var(--color);
    color:white
}
.promise.selected:after {
    content:'';
    position:absolute;
    inset:6px;
    border:1px solid #ffffffcc;
    border-radius:50%
}
.promise.selected i {
    border-top-color:#ffffff80
}
.trust {
    left:37.5%;
    top:1.45%;
    --color:#ffb600
}
.emotion {
    left:59.5%;
    top:24.1%;
    --color:#00a4e5
}
.creation {
    left:51.1%;
    top:60.65%;
    --color:#009b43
}
.challenge {
    left:23.9%;
    top:60.65%;
    --color:#ed2b7b
}
.honesty {
    left:15.5%;
    top:24.1%;
    --color:#b67bb2
}
.detail {
    position:absolute;
    width:24%;
    border:2px solid var(--color);
    border-radius:10px;
    background:#fff;
    text-align:center;
    padding:22px 14px 16px;
    z-index:4;
    box-shadow:0 5px 16px #00000005
}
.detail[hidden] {
    display:none
}
.detail[data-key=trust] {
    left:37.4%;
    top:19%;
    --color:#ffb600
}
.detail[data-key=emotion] {
    left:59.4%;
    top:42%;
    --color:#00a4e5
}
.detail[data-key=creation] {
    left:51%;
    top:78%;
    --color:#009b43
}
.detail[data-key=challenge] {
    left:23.8%;
    top:78%;
    --color:#ed2b7b
}
.detail[data-key=honesty] {
    left:15.4%;
    top:42%;
    --color:#b67bb2
}
.detail h2 {
    color:var(--color);
    font-size:15px;
    line-height:1.7;
    margin:0;
    padding-bottom:10px;
    border-bottom:1px solid var(--color);
    white-space:pre-line
}
.detail p {
    font-size:11px;
    line-height:1.8;
    white-space:pre-line;
    margin:10px 0 0
}
.close-detail {
    position:absolute;
    right:3px;
    top:0;
    border:0;
    background:white;
    color:#777;
    font-size:21px;
    width:26px;
    height:26px;
    border-radius:50%
}
.closing {
    font-weight:700;
    text-align:center;
    font-size:19px;
    line-height:1.6;
    color:#828581;
    margin:95px 18px 55px
}
.all-promises {
    max-width:1030px;
    margin:0 auto 200px
}
.color-slogan {
    width:100%;
    aspect-ratio:1686/160;
    background:url(list-reference.png) top center/100% auto no-repeat;
    margin-bottom:25px
}
.promise-board {
    border-radius:28px;
    background:linear-gradient(132deg,#ffe092 0%,#79d4ef 51%,#f8aa92 100%);
    padding:26px 54px 44px
}
.board-title {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    margin:0 0 26px;
    font-size:100px;
    line-height:1.15;
    font-weight:700;
    letter-spacing:.07em
}
.board-title small {
    display:block;
    font-size:24px;
    letter-spacing:.04em;
    border-bottom:1px solid;
    padding-bottom:9px;
    margin-bottom:7px
}
.mascot {
    width:126px;
    height:166px;
    background:url(list-reference.png) no-repeat;
    background-size:1349px auto;
    background-position:-390px -198px
}
.promise-row {
    --color:#ffb600;
    margin-top:30px;
    background:#fff
}
.row-2 {
    --color:#00a4e5
}
.row-3 {
    --color:#009b43
}
.row-4 {
    --color:#ed2b7b
}
.row-5 {
    --color:#b67bb2
}
.promise-row h3 {
    position:relative;
    margin:0;
    background:var(--color);
    color:white;
    text-align:center;
    font-size:60px;
    line-height:1.35;
    font-weight:700
}
.promise-row h3>span {
    display:none;
    position:absolute;
    left:0;
    top:-10px;
    font-size:96px;
    line-height:1;
    color:#ffffff16
}
.row-copy {
    display:flex;
    align-items:center;
    padding:18px 17px;
    gap:20px
}
.row-copy p {
    font-size:14px;
    line-height:1.8;
    margin:0;
    flex:1
}
.row-copy .lead {
    flex:0 0 45%;
    font-size:20px;
    line-height:1.65;
    color:var(--color);
    font-weight:700;
    text-align:right;
    border-right:1px solid var(--color);
    padding-right:20px
}
.bottom-closing {
    margin-top:20px;
    color:#39332f;
    font-size:20px
}
footer {
    text-align:center;
    padding:25px;
    color:#777;
    font-size:12px
}
@media(max-width:1050px) {
    .header-inner {
        margin:0 24px
    }
    .site-header nav>div {
        width:100%
    }
    .intro {
        font-size:16px;
        margin-top:25px
    }
    .all-promises {
        margin-left:30px;
        margin-right:30px
    }
    .closing {
        font-size:16px
    }
    .promise-board {
        padding:25px 30px 35px
    }
    .row-copy .lead {
        font-size:17px
    }
    .row-copy p {
        font-size:12px
    }
}
@media(max-width:640px) {
    .header-inner {
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:70px;
        margin:0 16px;
        padding:0 0 12px
    }
    .header-inner img {
        width:220px;
        max-width:58vw
    }
    .menu-toggle {
        display:block;
        border:0;
        background:#fbbf39;
        border-radius:5px;
        padding:10px;
        font-size:12px
    }
    .site-header nav {
        display:none
    }
    .site-header nav.open {
        display:block
    }
    .site-header nav>div {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .site-header nav a {
        width:100%;
        font-size:13px!important
    }
    .site-header nav a:before,.site-header nav a:after {
        display:none
    }
    .hero {
        margin-top:15px
    }
    .intro {
        font-size:13px;
        margin:24px 16px 28px;
        line-height:1.9
    }
    .mobile-only {
        display:block
    }
    .hint {
        font-size:10px
    }
    .flower {
        aspect-ratio:auto;
        padding-top:71%
    }
    .promise span {
        font-size:clamp(24px,7vw,44px)
    }
    .promise.selected:after {
        inset:3px
    }
    .promise i {
        border-left-width:6px;
        border-right-width:6px;
        border-top-width:4px
    }
    .promise.trust {
        top:1.45vw
    }
    .promise.emotion,.promise.honesty {
        top:17.1vw
    }
    .promise.creation,.promise.challenge {
        top:43.1vw
    }
    .detail {
        position:relative!important;
        left:auto!important;
        top:auto!important;
        width:calc(100% - 40px);
        margin:5px auto 0;
        padding:24px 20px 20px
    }
    .detail h2 {
        font-size:17px
    }
    .detail p {
        font-size:14px
    }
    .close-detail {
        width:40px;
        height:40px;
        font-size:25px;
        right:0;
        top:0;
        background:transparent
    }
    .closing {
        font-size:13px;
        margin:35px 25px;
        line-height:1.9
    }
    .all-promises {
        margin:40px 16px 80px
    }
    .color-slogan {
        margin-bottom:14px
    }
    .promise-board {
        padding:20px 16px 24px;
        border-radius:18px
    }
    .board-title {
        font-size:60px;
        gap:14px;
        margin-bottom:20px
    }
    .board-title small {
        font-size:15px;
        padding-bottom:4px
    }
    .mascot {
        width:78px;
        height:106px;
        background-size:843px auto;
        background-position:-244px -124px
    }
    .promise-row {
        margin-top:20px
    }
    .promise-row h3 {
        font-size:34px;
        line-height:1.55
    }
    .promise-row h3>span {
        font-size:64px;
        top:-3px
    }
    .row-copy {
        display:block;
        padding:17px
    }
    .row-copy .lead {
        font-size:16px;
        text-align:left;
        border-right:0;
        border-bottom:1px solid var(--color);
        padding:0 0 12px;
        margin-bottom:12px
    }
    .row-copy p {
        font-size:13px
    }
    .row-copy br {
        display:none
    }
    .bottom-closing {
        margin:20px 3px;
        font-size:13px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important
    }
}
/* Design refinement: rounded lettering and intact supplied title artwork. */
.promise,.detail,.all-promises {
    font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic Pro","Yu Gothic",Meiryo,sans-serif
}
.promise {
    transition:background-color .18s ease,box-shadow .18s ease
}
@media(hover:hover) {
    .promise:hover {
        background-color:rgba(255,255,255,.28);
        box-shadow:none
    }
    .promise.selected:hover {
        background:color-mix(in srgb,var(--color) 75%,white)
    }
}
.promise:focus-visible {
    background-color:rgba(255,255,255,.24)
}
.board-title {
    display:block;
    overflow:hidden;
    margin:-26px -54px 26px;
    line-height:0;
    letter-spacing:normal;
    border-radius:28px 28px 0 0
}
.board-title img {
    display:block;
    width:100%;
    height:auto
}
.promise-row h3 {
    font-weight:400;
    text-shadow:2px 3px 0 rgba(70,55,40,.2)
}
.promise-row h3>span {
    text-shadow:none;
    font-family:Arial,sans-serif;
    font-weight:700
}
.row-copy .lead {
    font-weight:600;
    font-size:18px;
    flex-basis:47%;
    padding-right:17px;
    line-height:1.65;
    overflow-wrap:anywhere
}
.row-copy {
    gap:17px
}
.row-copy p {
    font-size:13px
}
@media(max-width:1050px) {
    .board-title {
        margin:-25px -30px 26px
    }
    .row-copy .lead {
        font-size:16px
    }
    .row-copy p {
        font-size:12px
    }
}
@media(max-width:760px) {
    .row-copy {
        display:block;
        padding:17px
    }
    .row-copy .lead {
        text-align:left;
        border-right:0;
        border-bottom:1px solid var(--color);
        padding:0 0 12px;
        margin-bottom:12px;
        font-size:16px
    }
    .row-copy p {
        font-size:13px
    }
    .row-copy br {
        display:none
    }
}
@media(max-width:640px) {
    .board-title {
        margin:-20px -16px 20px;
        border-radius:18px 18px 0 0
    }
    .promise-row h3 {
        font-size:34px;
        text-shadow:1px 2px 0 rgba(70,55,40,.2)
    }
}
@media(prefers-reduced-motion:reduce) {
    .promise {
        transition:none
    }
}
.site-footer {
    padding:25px 20px 40px;
    color:#666;
    text-align:center;
    font-size:13px;
    line-height:1.8
}
.site-footer small {
    font-size:inherit
}
/* Separate desktop and mobile copy layouts. */
.detail {
    width:36%;
    padding:25px 18px 18px
}
.detail[data-key=trust] {
    left:31.4%
}
.detail[data-key=emotion] {
    left:53.4%
}
.detail[data-key=creation] {
    left:45%
}
.detail[data-key=challenge] {
    left:17.8%
}
.detail[data-key=honesty] {
    left:9.4%
}
.detail h2 {
    font-size:clamp(12px,1.43vw,15px);
    line-height:1.8;
    line-break:strict;
    word-break:normal;
    overflow-wrap:normal
}
.detail p {
    font-size:clamp(10px,1.05vw,11px);
    line-height:1.85;
    line-break:strict;
    word-break:normal;
    overflow-wrap:normal
}
@media(max-width:640px) {
    .detail {
        width:calc(100% - 32px);
        padding:28px 14px 20px
    }
    .detail h2 {
        font-size:clamp(14px,4vw,17px)
    }
    .detail p {
        font-size:clamp(12px,3.4vw,14px)
    }
}
.closing,.bottom-closing {
    color:#828581;
    font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic Pro","Yu Gothic",Meiryo,sans-serif;
    font-weight:600;
    font-size:19px;
    line-height:1.8
}
@media(max-width:1050px) {
    .closing,.bottom-closing {
        font-size:16px
    }
}
@media(max-width:640px) {
    .closing,.bottom-closing {
        font-size:13px;
        line-height:1.9
    }
}
.intro {
    font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic Pro","Yu Gothic",Meiryo,sans-serif
}
.closing-sp-break {
    display:none
}
@media(max-width:640px) {
    .closing-sp-break {
        display:block
    }
}
.promise-board {
    overflow:hidden
}
.board-title {
    position:relative;
    aspect-ratio:1646/354
}
.board-title img {
    position:absolute;
    width:102.18712%;
    max-width:none;
    height:auto;
    left:-.60753%;
    top:-7.90961%
}
.hero {
    display:grid;
    place-items:center
}
.hero img {
    position:static;
    width:65%;
    height:auto;
    max-width:100%;
    display:block
}
.color-slogan {
    background:none;
    aspect-ratio:auto
}
.color-slogan img {
    display:block;
    width:100%;
    height:auto
}
/* Responsive adjustments scoped to the existing shared header. */
.globalHeader2018_inner,.globalNavigation2018_inner {
    max-width:100%
}
.globalHeader2018_title {
    margin:0
}
.globalNavigation2018_list>li>a {
    width:auto
}
@media(max-width:640px) {
    .globalHeader2018_inner {
        width:auto;
        margin:0 16px
    }
    .globalHeader2018_cols {
        min-height:60px;
        padding-right:95px
    }
    .globalHeader2018_col-no1 {
        width:auto;
        float:none
    }
    .globalHeader2018_title>a>img {
        width:220px;
        max-width:58vw;
        height:auto
    }
    .globalHeader2018_inner>.menu-toggle {
        position:absolute;
        top:8px;
        right:0
    }
    .globalNavigation2018 {
        height:auto
    }
    .globalNavigation2018.mobile-collapsible {
        display:none
    }
    .globalNavigation2018.mobile-collapsible.open {
        display:block
    }
    .globalNavigation2018_list {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .globalNavigation2018_list>li {
        display:block;
        width:auto
    }
    .globalNavigation2018_list>li>a::before,.globalNavigation2018_list>li>a::after {
        display:none
    }
}
.detail h2 { font-size: 16px; }
.detail p { font-size: 14px; }
@media (max-width: 640px) {
    .detail h2 { font-size: 15px; }
    .detail p { font-size: 14px; }
}
/* Enlarge the mobile diagram only; keep the description panel readable. */
@media (max-width: 640px) {
    .flower { padding-top: 85.2%; }
    .flower-art { width: 120%; left: -10%; }
    .promise { width: 28.56%; }
    .promise.trust { left: 35%; top: 1.74vw; }
    .promise.emotion { left: 61.4%; top: 20.52vw; }
    .promise.honesty { left: 8.6%; top: 20.52vw; }
    .promise.creation { left: 51.32%; top: 51.72vw; }
    .promise.challenge { left: 18.68%; top: 51.72vw; }
    .promise span { font-size: clamp(28.8px, 8.4vw, 52.8px); }
    .interactive { overflow-x: clip; }
}
/* Enlarge the introductory image by 120% on mobile. */
@media (max-width: 640px) {
    .hero { aspect-ratio: 1440 / 864; }
    .hero img { width: 78%; }
}


/* Separate the supplied transparent mascot from the character-free diagram. */
.flower-art {
    width: 67.8%;
    left: 15.5%;
    top: 1.45%;
    clip-path: none;
}
.ishikawa-mascot {
    position: absolute;
    left: 44.871795%;
    top: 52.710843%;
    width: 8.547009%;
    height: 13.554217%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    background: none;
}
@media (max-width: 640px) {
    .flower-art { width: 81.36%; left: 8.6%; top: 1.74vw; }
    .ishikawa-mascot {
        left: 43.846154%;
        top: 44.871795vw;
        width: 10.256411%;
        height: 11.538462vw;
    }
    .flower.has-selection .ishikawa-mascot { opacity: .25; }
}

/* Stagger the three supplied catchphrase images to match the new artwork. */
.hero-catch {
    position: relative;
    display: block;
    width: 65%;
    aspect-ratio: 3350 / 2050;
}
.hero .hero-catch img {
    position: absolute;
    height: auto;
}
.hero-catch .catch-trust {
    width: 65%;
    left: 3.3%;
    top: 5.3%;
}
.hero-catch .catch-community {
    width: 66.36%;
    left: 12.6%;
    top: 36%;
}
.hero-catch .catch-emotion {
    width: 72.85%;
    left: 20.1%;
    top: 66.1%;
}
@media (max-width: 640px) {
    .hero-catch { width: 78%; }
}

/* Temporarily hide the secondary catchphrase and the closing below the list. */
.color-slogan[hidden], .bottom-closing[hidden] {
    display: none;
}
/* Link the center of the diagram to the full promise list. */
.promises-list-link {
    position: absolute;
    left: 39%;
    top: 35%;
    width: 21%;
    height: 33%;
    z-index: 1;
    border-radius: 8px;
}
#promises-list {
    scroll-margin-top: 24px;
}
@media (max-width: 640px) {
    .promises-list-link {
        left: 37%;
        top: 29.8vw;
        width: 25%;
        height: 28.2vw;
    }
}

/* Preserve the artwork lettering when a circle is selected. */
.promise.selected, .promise.selected:hover {
    background-color: transparent;
    background-image: url(promises-base.png);
    background-repeat: no-repeat;
    background-size: 284.87395% auto;
    color: transparent;
}
.promise.selected span, .promise.selected i {
    visibility: hidden;
}
.promise.selected::after {
    content: none;
}
.promise.selected.trust { background-position: 50.000000% 0.000000%; }
.promise.selected.emotion { background-position: 100.000000% 38.407948%; }
.promise.selected.creation { background-position: 80.909091% 100.386335%; }
.promise.selected.challenge { background-position: 19.090909% 100.386335%; }
.promise.selected.honesty { background-position: 0.000000% 38.407948%; }

/* Enlarge the desktop diagram and tighten the space around its closing copy. */
@media (min-width: 641px) {
    .interactive {
        max-width: 1200px;
        margin-top: -35px;
    }
}
.interactive > .closing {
    font-size: 21px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: .02em;
    margin: 35px 18px;
}
@media (min-width: 641px) and (max-width: 1050px) {
    .interactive > .closing { font-size: 18px; }
}
@media (max-width: 640px) {
    .interactive > .closing {
        font-size: 14px;
        margin: 24px 20px;
    }
}

/* Reveal each catchphrase briskly from left to right, once on page load. */
@keyframes catch-sweep-in {
    from {
        clip-path: inset(0 100% 0 0);
        transform: translateX(-80px);
        opacity: 0;
    }
    20% { opacity: 1; }
    to {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
        opacity: 1;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .hero .hero-catch img {
        animation: catch-sweep-in .65s linear both;
    }
    .hero .hero-catch .catch-trust { animation-delay: .15s; }
    .hero .hero-catch .catch-community { animation-delay: 1.1s; }
    .hero .hero-catch .catch-emotion { animation-delay: 2.05s; }
}

/* Center the mobile list leads and retain their meaningful two-line breaks. */
@media (max-width: 640px) {
    .row-copy .lead {
        text-align: center;
        font-size: clamp(13px, calc(5.88vw - 5.88px), 16px);
        overflow-wrap: normal;
    }
    .row-copy .lead br {
        display: inline;
    }
}

/* Tighten the space above the opening catchphrase. */
.hero {
    margin-top: -30px;
}
@media (max-width: 640px) {
    .hero { margin-top: -5px; }
}

/* Keep the small arrow below the mascot consistently light. */
.promises-list-link img {
    position: absolute;
    left: 50%;
    top: 96%;
    width: 12%;
    height: auto;
    transform: translateX(-50%);
    opacity: .5;
}

/* Footer matching the reference page, scoped to philosophy. */
.philosophy-footer {
    padding: 50px 0 40px;
    background: #f7f7f7;
    color: #333;
    font-size: 12px;
    text-align: center;
}
.philosophy-footer-inner {
    width: 100%;
    max-width: 1020px;
    padding: 0 10px;
    margin: 0 auto;
}
.philosophy-footer .foot_link_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    margin-top: 1em;
}
.philosophy-footer .foot_link_list:first-child { margin-top: 0; }
.philosophy-footer .foot_link_list > a {
    display: inline-block;
    padding: 0 .5em;
    border-left: 1px solid #333;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
}
.philosophy-footer .foot_link_list > a:first-child { border-left: 0; }
.philosophy-footer .foot_link_list > a:hover { text-decoration: underline; }
.philosophy-footer .foot_copy {
    border-top: 1px solid #ccc;
    padding-top: 30px;
    margin: 30px 0 0;
    line-height: 2;
}
.philosophy-footer .vis-sp { display: none; }
@media (max-width: 640px) {
    .philosophy-footer { padding: 32px 10px; }
    .philosophy-footer .vis-sp { display: inline; }
}

/* Use the existing shared smartphone header and menu. */
.philosophy-mobile-header { display: none; }
@media (max-width: 640px) {
    .globalHeader2018, .globalNavigation2018 { display: none; }
    .philosophy-mobile-header { display: block; }
}

/* Open the full promises on their own page. */
@media (hover: hover) and (pointer: fine) {
    .promises-list-link:hover img { opacity: .25; }
}
.promises-list-link:focus-visible img { opacity: .25; }
.promises-page .all-promises { margin: 45px auto 65px; }
.promises-page .color-slogan { margin: 0 0 25px; }
.promises-page .bottom-closing {
    font-size: 21px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: .02em;
    margin: 35px 0 0;
}
.back-link-wrap { text-align: center; margin: 45px 0 0; }
.back-link {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid #828581;
    border-radius: 6px;
    text-decoration: none;
    color: #555;
    background: #fff;
}
.back-link:hover { background: #f4f4f4; }
@media (max-width: 640px) {
    .promises-page .all-promises { margin: 28px 16px 45px; }
    .promises-page .bottom-closing { font-size: 14px; }
    .back-link-wrap { margin-top: 32px; }
}