@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-size:18px;
text-align:left;
color:#333;
min-width:1080px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.5vw; min-width:240px; max-width:767px;}
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

p{ line-height:1.5em; margin:0 0 18em; padding:0; text-align:left;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:640px){
p{ line-height:1.6em;}
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

strong{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight:bold;}
h1,h2,h3,h4{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight:bold;}

/*ヘッダー*/
#header{ background: url("https://www.oben.jp/assets/webinar/philips/20220114/images/mv.jpg") center top no-repeat; position: relative; text-align: center; padding: 120px 0 180px;}
#header #logo{ position: absolute; left: 0; right: 0; top: 0; text-align: right; margin: auto; width: 1080px;}
#header #mv{ background: rgba(255,255,255,0.5); padding: 60px 80px 50px; display: inline-block;}
#header #mv h1{ font-size: 24px; line-height: 1.6em; color: #2a1e5c; margin-top: 25px;}
@media print, screen and (min-width:1440px){
#header{ background-size: cover;}
}
@media screen and (max-width:767px){
#header{ background: url("../images/mv.jpg") center top no-repeat; background-size:cover; padding:21% 0 25%;}
#header #logo{ width:100%;}
#header #logo img{ width: 50%;}
#header #mv{ padding:6%; margin: 0 4.5%;}
#header #mv h1{ font-size:3.5vw;}
}

/*フッター*/
#footer{ background: #efecfa; padding: 40px 0;}
p.copyright{ font-size: 12px; color: #2a1e5c; line-height: 1em; text-align: center;}
@media screen and (max-width:767px){
#footer{ padding:3% 0 6%;}
p.copyright{ font-size:2.6vw;}
}

/*メイン*/
#content{ overflow:hidden;}
section { width:100%; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width:1000px;}
@media screen and (max-width:767px){
.maincontent { padding:0; margin:0 auto; width:94%;}
}

/*message*/
#message{ background: #2a1e5c; color: #fff; padding: 60px 0;}
#message h2{ text-align: center; font-size: 46px; margin-bottom: 50px;}
#message h3{ display: inline-block; background: #fff; color: #2a1e5c; font-size: 24px; line-height: 1em; padding: 5px 10px; margin-bottom: 15px;}
#message ul li{ padding: 60px 0; border-top: 1px solid #fff;}
#message ul li:first-child{ padding-top: 0; border-top: none;}
#message ul li:last-child{ padding-bottom: 0;}
#message h4{ font-size: 24px; line-height: 1em; margin-bottom: 40px;}
#message h4 span{ display: inline-block; margin-right: 1em;}
#message h4 strong{ display: inline-block; font-size: 36px; line-height: 1em;}
#message dl{ display: table; table-layout: fixed; width: 100%;}
#message dl dt{ display: table-cell; vertical-align: top; width: 145px;}
#message dl dd{ display: table-cell; vertical-align: top; padding-left: 25px;}
#message dl dd p{ font-size: 24px; line-height: 1.33em;}
#message figure.btn a{ display:block; width: 380px; margin: 0 auto; background: #fff; color: #2a1e5c; font-size: 24px; line-height: 1em; padding: 20px; border-radius: 50px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight:bold; cursor: pointer;}
#message ul li{ display: none;}
#message ul li.active{ display: block;}
#message figure.btn a.active{ display: none;}
@media screen and (max-width:767px){
#message{ padding:9% 0;}
#message h2{ font-size:7.5vw; line-height: 1.33em; margin-bottom:6%;}
#message h3{ font-size:4.5vw; padding:0.33em 0.5em; margin-bottom:6%;}
#message ul li{ padding:6% 0;}
#message h4{ font-size:4vw; margin-bottom:6%;}
#message h4 strong{ font-size:6vw;}
#message dl{ display:block;}
#message dl:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}
#message dl dt{ display: inline-block; float: left; width: 25vw; margin-right: 3%; margin-bottom: 1.5%;}
#message dl dt img{ width: 100%;}
#message dl dd{ display:block; padding:0;}
#message dl dd p{ font-size:3.5vw; line-height: 1.5em;}
#message figure.btn a{ width:75%; font-size:4.5vw; padding:0.5em;}
}


/*request*/
#request{ background: #fff; padding: 60px 0;}
#request p{ margin-bottom: 40px;}
#request h2{ text-align: center; margin-bottom: 20px;}
#request figure.btn{ text-align: center;}
#request figure.btn a{ display: block; width: 550px; margin: auto; font-size: 36px; line-height: 1em; color: #fff; background: #c6186a; padding: 20px; border-radius: 50px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight:bold;}
#request ul{ margin-bottom: 60px; margin-left: -20px; width: calc(100% + 40px); display: table; table-layout: fixed; border-collapse: separate; border-spacing: 20px 0;}
#request ul li{ display: table-cell; vertical-align: top; text-align: center; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight:bold;}
#request ul li figure{ margin-bottom: 15px;}
#request ul li p{ font-size: 16px; text-align: center; color: #2a1e5c;}
@media screen and (max-width:767px){
#request{ padding:9% 0;}
#request h2{ margin-bottom:3%;}
#request h2 img{ width: 90%;}
#request figure.btn a{ width:90%; font-size:6vw; padding:0.5em;}
#request ul{ margin-bottom:6%; margin:0 auto 6%; width:100%; display:block; letter-spacing: -1em; border-collapse:collapse; border-spacing:0;}
#request ul li{ display:inline-block; letter-spacing: 0; width: 30.3333%; margin: 3% 1.5%;}
#request ul li figure{ margin-bottom:3%;}
#request ul li figure img{ width: 100%;}
#request ul li p{ font-size:2.6vw; line-height:1.33em;}
}


/*program*/
#program{ background: #efecfa; padding: 60px 0;}
#program h2{ text-align: center; margin-bottom: 45px;}
#program dl{ width: 660px; margin: 0 auto; text-align: center; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight:bold;}
#program dl dt{ font-size: 24px; line-height: 1em; color: #5c1e30; margin:10px auto;}
#program dl dd{ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #2a1e5c; font-size: 18px; line-height: 1.6em; color: #2a1e5c;}
#program dl dd:last-child{ margin-bottom: 0; padding-bottom: 0; border: none;}
@media screen and (max-width:767px){
#program{ padding:9% 0;}
#program h2{ margin-bottom:6%;}
#program h2 img{ height: 6vw;}
#program dl{ width:94%;}
#program dl dt{ font-size:4vw; margin:1.5% auto;}
#program dl dd{ margin-bottom:3%x; padding-bottom:3%; font-size:3vw;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}