/* ======================================================================================================== */
/* 私たち出版ユニオンとは */
/* ======================================================================================================== */

/* ベース */
div.content.page { padding:5vh 0 0 0; }
section.about-us { border:3px solid #89c3eb; box-shadow:3px 3px 5px #000; box-sizing:border-box; border-radius:10px; padding:25px; margin:auto; margin-bottom:5vh; }

/* 見出し */
section.about-us h2 { font-size:18px; margin-bottom:10px; }

/* テキスト */
section.about-us p { text-align:justify; line-height:1.8; }

@media( min-width:768px ) { 

/* ベース */
div.content.page { padding:0; }
section.about-us { max-width:960px; width:90%; }

/* 見出し */
section.about-us h2 { font-size:30px; margin-bottom:10px; }

}

/* ======================================================================================================== */
/* こんな困りごとありませんか？ */
/* ======================================================================================================== */

/* ベース */
section.troubles { background-color:#dcf1f8; padding:50px 0; margin-bottom:5vh; }

/* 見出し */
section.troubles h2 { font-size:18px; }

/* テキスト */
section.troubles p strong { font-size:20px; color:#45a2e2; }

/* リスト */
section.troubles ul { align-items:flex-start; display:flex; flex:1; flex-wrap:wrap; gap:25px; justify-content:flex-start; margin:20px auto; width:100%; }
section.troubles ul li { flex:1 1 calc( (100% - 25px) / 2); }
section.troubles ul li img { height:100%; max-width:100%; width:100%; }

@media( min-width:768px ) { 

/* 見出し */
section.troubles h2 { font-size:30px; }

/* リスト */
section.troubles ul { margin:40px auto; }
section.troubles ul li { flex:auto; width:calc( 25% - 25px ); }

}

/* ======================================================================================================== */
/* 解決事例 */
/* ======================================================================================================== */

/* ベース */
section.case { background-color:#f2ffee; border-radius:10px; box-sizing:border-box; border:3px solid #007b0a; padding:20px 10px; margin:auto; }

/* 見出し */
section.case h2 { font-size:18px; margin-bottom:15px; }
div.flex div.flex-box h3 { font-size:18px; border-bottom:2px solid #007b0a; margin-bottom:10px; }

/* 配置 */
div.flex { display:flex; flex-direction:column; gap:20px; margin-bottom:20px; }
div.flex div.flex-box { background-color:#fff; border-radius:10px; border:2px solid #007b0a; box-shadow:2px 2px 3px #007b0a; box-sizing:border-box; padding:25px 20px; margin:auto; width:95%; }

/* テキスト */
div.flex div.flex-box p { text-align:justify; }
section.case p.center { font-size:16px;line-height:1.8; }

@media( min-width:768px ) { 

/* ベース */
section.case { padding:30px 20px; }

/* 見出し */
section.case h2 { font-size:30px; margin-bottom:20px; }
div.flex div.flex-box h3 { font-size:24px; margin-bottom:15px; }

/* 配置 */
div.flex { gap:30px; margin-bottom:30px; }
div.flex div.flex-box { padding:35px 30px; margin:auto; width:90%; }

/* テキスト */
section.case p.center { font-size:18px; }

}