@charset "UTF-8";
:root {
    --color-base-primary: #FFFFFF;
    --color-base-secondary: #F2F7F8;
    --color-text: #333333;
    --color-text-white: #FFFFFF;
    --color-text-red: #D65642;
    --color-accent-primary: #152768;
    --color-accent-primary-hover: #0B1436;
    --color-accent-secondary: #3b81c7;
    --color-gray-light: #E6E6E6;
    --color-gray-medium: #CCCCCC;
    --section-padding: 64px;
    @media (min-width: 768px) {
        --section-padding: 96px;
    }
}
body {
    background-color: var(--color-base-primary);
	font-family: 'Noto Sans JP', sans-serif;
  	color: var(--color-text);
    font-size: 16px;
    font-weight: 400;
}
/*---------- 共通css調整 ----------*/
#breadcrumbs ol li {
    font-size: 10px;
}
@media (min-width: 768px) {
    #breadcrumbs ol li {
        font-size: 12px;
    }
}
/*---------- 共通 ----------*/
main {
    padding-top: 56px;
}
@media (min-width: 1200px) {
    main {
        padding-top: 73px;
    }
}
main * {
    box-sizing: border-box;
    overflow-wrap: break-word;
    font-feature-settings: "palt";
}
main p {
    line-height: 1.75;
    letter-spacing: .05em;
}
section {
  	position: relative;
  	padding: var(--section-padding) 0;
}
.container {
    position: relative;
	width: 90%;
	max-width: 1200px;
	margin: auto;
}  
.content {
    position: relative;
    margin: auto;
}
.content p + p {
    margin-top: 16px;
}
a {
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: all 0.3s;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}
img {
    max-width: 100%;
    vertical-align: middle;
}
.font_bold {
    font-weight: 700;
}
.color_primaly {
    color: var(--color-accent-primary);
}
.color_secondary {
    color: var(--color-accent-secondary);
}
/*---------- heading----------*/ 
h2.section_heading {
    position: relative;
    margin-bottom: 64px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
h2.section_heading::before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background-color: var(--color-accent-secondary) ;
}
@media (min-width: 768px) {
    h2.section_heading {
        margin-bottom: 80px;
        font-size: 32px;
        letter-spacing: .05em;
    }  
    h2.section_heading::before {
        width: 64px;
        height: 4px;
    }  
}
/*---------- list ----------*/ 
ul.list, ol.list {
    margin-left: 2em;
}
ul.list li,
ol.list li {
    line-height: 1.5;
}
ul.list li + li,
ol.list li + li {
    margin-top: 4px;
}
@media (min-width: 768px) {  
ul.list li, 
ol.list li {
    letter-spacing: .05em;
}
}
/* list_style:disc */	    
ul.list.disc > li {
    list-style: disc;
}
/*---------- main visual----------*/ 
.mainv {
	position: relative;
	width: 100%;
    overflow: hidden;
    background-color: var(--color-base-secondary);
}
.mainv_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 0;
    text-align: center;
} 
h1 {
	font-size: clamp(18px, 4.0vw, 40px);
    font-weight: 700;
	line-height: 1.5;
    letter-spacing: 0;
    z-index: 10;
}	
.mainv_subtitle {
    margin-top: 24px;
    text-align: left;
    z-index: 10;
} 
.mainv_subtitle p {
	font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}
.logo_city {
    margin-top: 24px;
    width: 240px;
}
@media (min-width: 768px) {
    .mainv_container {
        align-items: flex-start;
        padding: 80px 0 224px;
        text-align: left;
    }
    h1 {
        letter-spacing: .1em;
    }
    .mainv_subtitle {
        margin-top: 32px;
        padding-left: 24px;
        border-left: 1px solid var(--color-text);
    }     
    .mainv_subtitle p {
        font-size: 16px;
        line-height: 2.0;
        letter-spacing: .05em;
    } 
    .logo_city {
        margin-top: 32px;
        width: 320px;
    }
}

/* mainv */
.mainv_eyecatch {
    display: none;
}    
@media (min-width: 768px) {
    .mainv_eyecatch {
        display: block;
        position: absolute;
        top: 0;
        width: 584px;
        max-width: 100%;
        right: -336px;
    }     
}
@media (min-width: 960px) {
    .mainv_eyecatch {
        width: 600px;
        top: 0;
        right: -272px;
    } 
}        
@media (min-width: 1024px) {
    .mainv_eyecatch {
        right: -208px;
    } 
} 
@media (min-width: 1200px) {
    .mainv_eyecatch {
        right: -60px;
    } 
}
/*---------- section_toc ----------*/
.section_toc {
    padding-top: 48px;
    padding-bottom: 48px;
    background-color: var(--color-base-secondary);   
}
.section_toc .container {
    position:relative;
}
.tocBox {
    box-shadow: 0px 0px 16px 0px rgba(100, 100, 100, 0.08);
}
.toc_title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 1em 0;
    background-color: var(--color-accent-secondary) ;
    border-radius: 8px 8px 0 0;
    color: var(--color-base-primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1em;
}
.toc_title::before {
    flex: 0 0 auto;
    content: '';
    background-image: url("/web/jp/government/images/digitaldenen/icon_toc.svg");
    background-size: cover;
    width: 1em;
    height: 1em;
}
.toc_list {
    background-color: var(--color-base-primary);
    border-radius: 0 0 8px 8px;
    padding: 24px 8px;
}
.toc_list ol {
    margin-left: 2em;
}
.toc_list ol li {
    padding-left: .5em;
    list-style: decimal; 
    font-weight: 500;
    line-height: 1.5;
}
.toc_list ol li + li {
    margin-top: 16px;
}
.toc_list ol li:hover {
    color: var(--color-accent-secondary) ;
    text-decoration: underline;
}
@media (min-width: 768px) {
    .section_toc {
        padding-top: var(--section-padding);
        padding-bottom: var(--section-padding);
        background-color: var(--color-base-primary);   
    }
    .tocBox {
        max-width: 640px;
        margin: -256px auto 0;
        box-shadow: 0px 0px 32px 0px rgba(100, 100, 100, 0.08);
    }   
    .toc_title {
        font-size: 18px;
    }
    .toc_list {
        padding: 32px 16px 32px 48px;
    }    
}
/*---------- section_movie ----------*/ 
.section_movie {
    padding-top: 48px;
    padding-bottom: 0;
}    
.section_movie h2 {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 0.25em; 
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.section_movie h2::before,
.section_movie h2::after {
    content: "";
    height: 4px; 
    width: 40px; 
    background-color: var(--color-text);
    border-radius: 5px; 
}
.section_movie h2::before {
    transform: rotate(60deg);
}
.section_movie h2::after {
    transform: rotate(-60deg); 
 }
.section_movie .content {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 24px 64px;
}
.section_movie .content > .text {
    display: contents;
} 
.section_movie .content > * {
    width: 100%;
} 
.section_movie .content .description {
    order: 3;
}
.section_movie .content .movie {
    order: 2;
} 
.youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}
@media (min-width: 768px) {
    .section_movie {
        padding-top: 0;
    } 
}
@media (min-width: 960px) {
    .section_movie h2 {
        margin-bottom: 24px;
    }
    .section_movie .content {
        align-items: center;
    }
    .section_movie .content > .text {
        display: block;
    }
    .section_movie .content > * {
        width: calc(100% / 2 - 32px);
    }
    .section_movie .content > .movie {
        order: 1;
    }
    .section_movie .content > .text {
        order: 2;
    }
}
/*---------- section problem ----------*/ 
.section_problem .content {
    max-width: 960px;
}
.content > .problem + .problem {
    margin-top: 48px;
}
.problem > * + * {
    margin-top: 24px;
}
.problem > .text_wrap::after {
    content: "";
    display: block;
    clear: both;
}
.problem > .text_wrap {
    zoom: 1;
}
.problem > .text_wrap > figure {
    width: 96px;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 8px;
}
.problem .text_wrap > figure figcaption {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;;
}
.problem.enterprise .text_wrap > figure {
    float: right;
    margin: 0 0 8px 20px;
}
.problem.gvernment .text_wrap > figure {
    float: left;
    margin: 0 20px 8px 0;
}
.problem .problem_wrap {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 12px;
    padding : 24px 12px;
    background-color: #FFFBEB;
}
.problem.gvernment .problem_wrap {
    background-color: #F2FFF8;
}
.problem_item {
    width: calc(100% / 2 - 6px);
    max-width: 240px;
    padding: 12px;
    background-color: var(--color-base-primary);
    box-shadow: 0 4px 4px rgba(100, 100, 100, 0.15);
    border-radius: 8px;
}
.problem_item > figure img {
    display: block;
    margin: auto;
    width: 96px;
}
.problem_item > p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
}
.problem_item > p > span {
    color: var(--color-text-red);
}
@media (min-width: 960px) {
    .content > .problem + .problem {
        margin-top: 64px;
    }
    .problem .text_wrap {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-end;
        gap: 48px;
    } 
    .problem > .text_wrap::after {
        content: none;
    }
    .problem .text_wrap > .text {
        flex: 1;
    } 
    .problem.enterprise .text_wrap > figure {
        order: 2;
    } 
    .problem .text_wrap > figure {
        margin: 0; 
        width: 160px;
    }
    .problem.enterprise .text_wrap > figure,
    .problem.gvernment .text_wrap > figure {
        margin: 0;
    } 
}
@media (min-width: 768px) {
    .problem > .problem_wrap {
        padding : 32px 24px;
    }
    .problem_item {
        width: calc(100% / 3 - 8px);
        padding: 24px 12px 12px;
        box-shadow: 0 4px 12px rgba(100, 100, 100, 0.15);
        border-radius: 12px;
    }
    .problem_item > figure img {
        width: 144px;
    }
    .problem_item > p > span {
        font-size: 16px;
    }
}
/*---------- section dx ----------*/ 
.section_dx {
    background-color: var(--color-base-secondary);
} 
.section_dx .content {
    max-width: 960px;
}
.section_dx .content > * + *:not(.moreLinkText) {
    margin-top: 24px;
}
.dx_img {
    background-color: var(--color-base-primary);
    border: 1px solid var(--color-accent-secondary);
    border-radius: 4px;
    padding: 12px 8px;
}
.dx_img img {
    display: block;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .dx_img {
        border-radius: 12px;
        padding: 32px 24px;
    }
}
table { 
    width: 100%;
    table-layout: fixed;
    background-color: var(--color-base-primary);
    border-collapse: collapse;
    border-spacing: 0;
}
th,
td {
    border: 1px solid var(--color-gray-light);
}
th {
    padding: 1em .5em;
    background-color: #fafafa;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
thead tr th:nth-of-type(2) {
    background-color: #FFFBEB;
}
thead tr th:nth-of-type(3) {
    background-color: #F2FFF8;
}
tbody th {
    vertical-align: middle;
}
td {
    padding: 1em;
}
td * {
    font-size: 14px;
}
td ul.list {
    margin-left: 1.0em;
}
td ul.list li + li {
    margin-top: .5em;
}
/* 固定する見出し */
.sticky {
    position: sticky;
    width: 96px;
    top: 0;
    left: 0;
    background: none;
    border-right: none; 
    border-left: none; 
}
.sticky:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    border-right: 1px solid var(--color-gray-light);
    border-left: 1px solid var(--color-gray-light);
    box-sizing: content-box;
    z-index: -1;
} 
.moreLinkText {
    display: none;
}
@media (max-width: 767px) {
    table { 
        min-width: 960px;
    }
    /* スクロールエリア */
    .scroll_content {
        overflow-x: auto;
        padding-bottom: 12px;
    } 
    .scroll_content::-webkit-scrollbar {
        height: 8px; 
    }
    .scroll_content::-webkit-scrollbar-track {
        background: var(--color-gray-light);
        border-radius: 4px; 
    } 
    .scroll_content::-webkit-scrollbar-thumb {
        background: var(--color-gray-medium);
        border-radius: 4px; 
    } 
    .moreLinkText {
        position: absolute;
        right: 0;
        display: block;
        margin-top: 4px;
        color: var(--color-accent-secondary) ;
        width: 56px;
        font-size: 12px;
    }
    .lineArrow {
        margin: -4px 0 0 -4px;
        width: 100%;
        height: 6px;
        border-bottom: 1px solid var(--color-accent-secondary);
        border-right: 1px solid var(--color-accent-secondary);
        transform: skew(45deg);
    }
}
/*---------- section solution ----------*/ 
.section_solution .content {
    max-width: 960px;
}
.section_solution .content > * + * {
    margin-top: 24px;
}
.section_solution .content p + p {
    margin-top: 16px;
}
.solution_img {
    background-color: var(--color-base-secondary);
    border: 1px solid var(--color-accent-secondary);
    border-radius: 4px;
    padding: 12px 8px;
}
.solution_img img {
    display: block;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .solution_img {
        border-radius: 12px;
        padding: 32px 12px;
    }
}
/*---------- section summary ----------*/ 
.section_summary {
    background-color: var(--color-base-secondary);
} 
.section_summary .content {
    max-width: 960px;
}
/*---------- include > cta.html調整 ----------*/ 
.cta_wrap .container {
    z-index: 0;
}
.cta_wrap::after {
    z-index: -1;
}
.cta_bg {
    z-index: -10;
}