@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Noto+Serif+JP:wght@400;700;900&display=swap');

/*paddingとborderがwidthとheightの中に含まれるようになる*/
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

.pc { display: block; }
.sp { display: none; }
.sp-inline { display: none; }

a { text-decoration: underline; color: #00368f; }
a:hover { text-decoration: none; color: #00368f; }
a:visited { color: #00368f; }

/* ベース定義 */

html { scroll-behavior: smooth; }

body { font-size: 85%; line-height: 180%; color: #333333; background-color: #ffffff; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; margin: 0; padding: 0; overflow-x: hidden; }

#page_top{ position: fixed; right: 0; bottom: -150px; opacity: 1; z-index: 999; }
#page_top a{ position: relative; display: block; }
#page_top a::before{ bottom: 0; right: 0; left: 0; margin: auto; text-align: center; opacity: 0.6; }

	
/*個別設定*/

header2 { width: 100%; max-width: 1280px; margin: 60px auto 0; display: block; overflow: hidden; padding: 0 30px; }
header2 div.read-box { width: calc(45% - 60px); float: left; font-size: 350%; font-weight: 700; letter-spacing: 2px; margin-top: 80px; }
header2 div.read-box span { display: block; font-size: 60%; font-weight: 500; }
header2 div.read-box div { background-color: #e7e7e7; padding: 20px; font-size: 35%; font-weight: 400; letter-spacing: 0; line-height: 180%; border-radius: 30px; margin: 26px 0 0 0; }
header2 div.main-image { width: 55%; float: right; margin-bottom: 60px; max-width: 697px; margin-top: 30px; }
header2 div.main-image img { width: 100%; }
header2 p { display: block; clear: both; width: 100%; max-width: 980px; margin: 0 auto; text-align: center; border-top: 1px solid #898885; border-bottom: 1px solid #898885; padding: 60px 0; }
header2 p b { display: block; font-size: 180%; letter-spacing: 2px; margin: 0 0 20px; }
header2 p span { display: block; width: 80%; text-align: left; margin: 0 auto; line-height: 180%; }

section.content-wrapper-01 { width: 100%; background-color: #f9f9f9; margin: 80px 0 0; padding: 80px 0; }
section.content-wrapper-02 { width: 100%; background-color: #fff; margin: 0 0 0; padding: 80px 0; }

div.content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 30px; }

div.product-01 div.product-title { border: 1px solid #397fb5; }
div.product-02 div.product-title { border: 1px solid #e5cee3; }
div.product-title { width: 100%; text-align: center; padding: 40px; margin-bottom: 40px; color: #212721; letter-spacing: 1px; }
div.product-title b { display: block; font-size: 240%; font-weight: 700; }
div.product-title img { display: block; margin: 25px auto; }

div.product-box-left { float: left; width: calc(50% - 20px); padding: 20px; margin: 0 0 0 20px; }
div.product-box-right { float: right; width: calc(50% - 20px); padding: 20px; margin: 0 20px 0 0; }

div.product-box-left img, div.product-box-right img { display: block; margin: 0 auto; width: 100%; }

div.product-spec { clear: both; width: 80%; margin: 0 auto; padding: 80px 0 0; }
div.product-spec img { display: block; width: 100%; max-width: 814px; margin: 0 auto; }

div.product-box-right p { display: block; color: #fff; background-color: #898885; padding: 20px 25px; font-size: 130%; font-weight: 700; }
div.product-box-right p span { font-size: 75%; font-weight: 400; }

div.product-box-right ul { display: block; width: 90%; margin: 20px auto 0; }
div.product-box-right ul li { position: relative; font-size: 85%; color: #212721; letter-spacing: 1px; margin: 15px 0; padding-left: 15px; }
div.product-box-right ul li:before { content: "※"; position: absolute; left: 0px; top: 0px; }

div.product-01 div.product-box-right a { background-color: #397fb5; }
div.product-02 div.product-box-right a { background-color: #bb7bb2; }
div.product-box-right a { display: block; width: 90%; margin: 40px auto 0; text-align: center; color: #fff; border-radius: 60px; padding: 20px; transition: 0.3s; }
div.product-01 div.product-box-right a:hover { text-decoration: none; transition: 0.3s; background-color: #194b72; }
div.product-02 div.product-box-right a:hover { text-decoration: none; transition: 0.3s; background-color: #853079; }

div.product-01 a.btn { display: block; width: 90%; font-size: 100%; max-width: 900px; margin: 40px auto 0; text-align: center; color: #52a6e2; border: 2px solid #52a6e2; border-radius: 60px; padding: 15px; transition: 0.3s; }
div.product-01 a.btn:hover { text-decoration: none; transition: 0.3s; background-color: #52a6e2; color: #fff; }
div.product-02 a.btn { display: block; width: 90%; font-size: 100%; max-width: 900px; margin: 40px auto 0; text-align: center; color: #52a6e2; border: 2px solid #52a6e2; border-radius: 60px; padding: 15px; transition: 0.3s; }
div.product-02 a.btn:hover { text-decoration: none; transition: 0.3s; background-color: #52a6e2; color: #fff; }

div.caution { padding: 60px; border-top: 1px solid #ddd; font-size: 85%; color: #212721; line-height: 180%; }
div.other-link { padding: 60px; border-top: 1px solid #ddd; text-align: center; }
div.other-link b { display: block; color: #212721; font-size: 220%; font-weight: 700; letter-spacing: 2px; margin-bottom: 40px; }
div.other-link a { margin: 0 20px; transition: 0.3s; }
div.other-link a:hover { opacity: 0.6; transition: 0.3s; }
div.other-link p { text-align: center; display: block; margin: 20px 0 40px; }