@charset "UTF-8";
/* 
Theme Name:safari-P
*/
/* 赤 */
/* 赤 */
/* 赤 */
/* 赤 */
/* グレー */
/* グレー */
/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
@import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer; }

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer; }

figure {
  margin: 0; }

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0; }

ul, ol, dl, dd {
  margin: 0;
  padding: 0;
  list-style: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit; }

p {
  margin: 0; }

cite {
  font-style: normal; }

fieldset {
  border-width: 0;
  padding: 0;
  margin: 0; }

table {
  border-collapse: collapse; }

/*
丸ゴシ：font-family: 'Kiwi Maru', sans-serif;
ゴシ：font-family: 'Noto Sans JP', sans-serif;
明朝：font-family: 'Noto Serif JP', serif;
英文字1：font-family: 'Century Gothic', serif;
英文字2：font-family: 'Questrial', monospace, serif;
*/
/* ------------------------------------
// base
------------------------------------ */
html {
  font-size: 62.5%; }
  @media screen and (max-width: 767px) {
    html {
      font-size: calc(1000vw / 384); } }

body {
  background: #FFFFFF;
  color: #242321;
  font-family: 'Century Gothic','Kiwi Maru',"Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6;
  margin: 0; }

.fontJpKi {
  font-family: 'Kiwi Maru', serif; }

.fontJpSu {
  font-family: 'Noto Sans JP', sans-serif; }

.fontJpSe {
  font-family: 'Noto Serif JP', serif; }

.fontEn01 {
  font-family: 'Century Gothic', sans-serif; }

.fontEn02 {
  font-family: 'Questrial', sans-serif; }

#wrapper {
  position: relative; }

a {
  outline: none; }
  a:link {
    color: #325A8C;
    text-decoration: none; }
  a:visited {
    color: #325A8C;
    text-decoration: none; }
  a:hover {
    color: #325A8C;
    text-decoration: underline; }
    a:hover img {
      transition: .3s;
      opacity: .8; }
  a:active {
    color: #325A8C;
    text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a[href*="tel:"] {
  pointer-events: none; }
  @media screen and (max-width: 1024px) {
    a[href*="tel:"] {
      pointer-events: initial; } }

.pc {
  display: block !important; }

.sp, .md {
  display: none !important; }

@media screen and (max-width: 1024px) {
  .pc {
    display: none !important; }

  .md {
    display: block !important; } }
@media screen and (max-width: 767px) {
  .sp {
    display: block !important; }

  .pc-md {
    display: none !important; }

  p {
    word-break: break-all; } }
/* ------------------------------------
// menu

----------------------------------- */
#menu {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20;
  transition: visibility 0.3s, opacity 0.3s, transform 0.1s linear 0.3s;
  overflow-y: auto;
  background: #CCC;
  padding: 2rem; }
  #menu a {
    color: #555; }
  #menu > div {
    width: auto;
    margin: 0 auto; }
  .js-menuOpen #menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: visibility 0.3s, opacity 0.3s, transform 0s; }
  @media screen and (max-width: 767px) {
    #menu .mainmenu > li {
      margin-bottom: 2rem; }
      #menu .mainmenu > li a {
        font-size: 1.6rem;
        display: block;
        font-weight: bold;
        margin-bottom: 10px; }
    #menu .mainmenu .submenu {
      padding-left: 2rem; }
      #menu .mainmenu .submenu li a {
        font-weight: normal; } }

/* ------------------------------------
// header
----------------------------------- */
#header {
  background: #FFF;
  margin: 0 auto;
  position: relative;
  padding: 0 5%; }
  #header header {
    padding: 50px 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    #header header a {
      color: #bcbcbc; }
    #header header .logo {
      font-size: 3.0rem;
      font-weight: bold; }
    #header header nav > ul {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 10px 10px;
      margin-bottom: 10px; }
      #header header nav > ul > li {
        padding-right: 1.5rem;
        position: relative;
        font-size: 1.8rem; }
        #header header nav > ul > li ul.submenu {
          display: none; }
          #header header nav > ul > li ul.submenu.open {
            animation-name: fadein;
            animation-duration: 1s;
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translateY(100%);
            background: #bcbcbc;
            padding: 15px 20px;
            z-index: 100; }
            #header header nav > ul > li ul.submenu.open a {
              color: #FFF;
              white-space: nowrap; }
            #header header nav > ul > li ul.submenu.open li {
              margin-bottom: 5px; }
        #header header nav > ul > li.parent > a {
          display: block; }
          #header header nav > ul > li.parent > a:after {
            content: "";
            display: inline-block;
            width: 5px;
            height: 5px;
            border: 2px solid;
            border-color: #bcbcbc #bcbcbc transparent transparent;
            margin-left: .2em;
            transform: rotate(135deg) translateX(-50%); }
  #header .btn_menu {
    display: none; }
  @media screen and (max-width: 1024px) {
    #header header {
      display: block;
      padding: 0 20px; } }
  @media screen and (max-width: 767px) {
    #header header {
      padding: 2rem; }
    #header nav {
      display: none; }
    .js-menuOpen #header .btn_menu > span {
      background: #FFF; }
      .js-menuOpen #header .btn_menu > span:nth-child(1) {
        top: 44%;
        transform: rotate(45deg); }
      .js-menuOpen #header .btn_menu > span:nth-child(2) {
        opacity: 0;
        transform: rotate(135deg); }
      .js-menuOpen #header .btn_menu > span:nth-child(3) {
        bottom: auto;
        top: 44%;
        transform: rotate(-45deg); }
    #header .btn_menu {
      display: block;
      position: absolute;
      right: 2.2rem;
      top: 2.8rem;
      z-index: 100;
      width: 3.6rem;
      height: 2.5rem;
      cursor: pointer; }
      #header .btn_menu > span {
        transition: transform 0.2s, opacity 0.1s, background-color .2s;
        position: absolute;
        left: 0;
        display: block;
        width: 3.5rem;
        height: 0.5rem;
        background: #bcbcbc; }
        #header .btn_menu > span:nth-child(1) {
          top: 0; }
        #header .btn_menu > span:nth-child(2) {
          top: 40%; }
        #header .btn_menu > span:nth-child(3) {
          bottom: 0; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* ------------------------------------
// main
----------------------------------- */
main article {
  margin: 0 auto 100px;
  padding: 0 5%;
  font-size: 1.6rem; }
  main article section {
    margin: 5rem 0 100px; }
@media screen and (max-width: 1024px) {
  main article {
    padding: 0 2rem; }
    main article section {
      margin-bottom: 5rem; }
      main article section:last-child {
        margin-bottom: 0; }
      main article section > section {
        margin: 5rem 0; } }

/* ------------------------------------
// footer
----------------------------------- */
#pagetop {
  position: fixed;
  bottom: 30px;
  right: 30px; }
  #pagetop a {
    background: #B2B2B2;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: relative; }
    #pagetop a span {
      position: absolute;
      top: 15px;
      left: 12.5px;
      display: block;
      width: 15px;
      height: 15px;
      border: 3px solid;
      border-color: #565656 #565656 transparent transparent;
      transform: rotate(-45deg);
      transition: .3s; }
    #pagetop a:hover span {
      border-color: #FFF #FFF transparent transparent; }

#footer {
  background: #ededed;
  padding: 60px 0; }
  #footer footer {
    padding: 0 5%;
    margin: 0 auto; }
    #footer footer h2 {
      font-size: 2.4rem;
      margin-bottom: 30px; }
    #footer footer > ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0 2%; }
      #footer footer > ul > li {
        background: #FFF;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.7);
        width: 23%;
        padding: 2rem;
        margin-bottom: 20px; }
        #footer footer > ul > li > a {
          font-weight: 300;
          font-size: 1.8rem;
          color: #000000; }
        #footer footer > ul > li > ul {
          margin-top: 15px; }
          #footer footer > ul > li > ul a {
            padding-left: 1em;
            text-indent: -1em;
            display: inline-block;
            color: #000000;
            font-size: 1.6rem; }
            #footer footer > ul > li > ul a:before {
              content: "－"; }
    #footer footer .copyright {
      padding: 2em 0 0 0;
      border-top: 1px solid #B2B2B2; }
  @media screen and (max-width: 1024px) {
    #footer {
      padding: 60px 1em; }
      #footer footer > ul > li {
        width: 48%; }
        #footer footer > ul > li.workshop {
          width: 100%; }
        #footer footer > ul > li.blog {
          width: 50%; } }
  @media screen and (max-width: 767px) {
    #footer footer > ul > li.english {
      width: 100%; } }

/* ------------------------------------
// #ws701
----------------------------------- */
#ws701 .inq {
  background: #F3F3F3;
  padding: 2rem; }
#ws701 .panel {
  padding: 5em 3rem 5rem 3rem;
  border: 8px solid #555;
  margin-bottom: 50px;
  background: #a2e5e5; }
  #ws701 .panel .htype01 {
    padding: 0; }
  #ws701 .panel .ws701_lead01 {
    font-size: 1.8rem; }
  #ws701 .panel .ws701_dl01 {
    margin: 40px 2em;
    padding: 40px 0;
    border-top: 4px dashed #555;
    border-bottom: 4px dashed #555; }
    #ws701 .panel .ws701_dl01 dt {
      font-weight: bold;
      font-size: 2.4rem;
      margin-bottom: 5px; }
    #ws701 .panel .ws701_dl01 dd {
      margin-bottom: 30px; }
  #ws701 .panel .ws701_profile {
    background: #FFF;
    padding: 2rem; }
    #ws701 .panel .ws701_profile h3 {
      font-size: 3.6rem;
      text-align: center;
      font-weight: bold; }
    #ws701 .panel .ws701_profile .ws701_dl02 dt {
      font-weight: bold;
      font-size: 2.4rem;
      margin-bottom: 5px; }
    #ws701 .panel .ws701_profile .ws701_dl02 dd {
      margin-bottom: 30px; }

#p_2191 h1.htype01 span.supported {
  font-size: 1.8rem; }
#p_2191 h3 {
  font-size: 2.4rem;
  margin-bottom: 1rem; }
#p_2191 blockquote {
  padding-left: 2rem;
  border-left: 5px solid #CCC; }
#p_2191 .notice {
  background: #f1eff7;
  padding: 2rem;
  margin: 30px 0; }

#p_826 blockquote {
  padding-left: 2rem;
  border-left: 5px solid #CCC; }
#p_826 .notice {
  background: #f1eff7;
  padding: 2rem;
  margin: 30px 0; }

#p_1793 .commentbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  padding-top: 50px;
  border-top: 1px solid #555; }
  #p_1793 .commentbox .photo {
    width: 200px; }
  #p_1793 .commentbox .detail {
    width: calc(100% - 200px - 4rem); }
@media screen and (max-width: 767px) {
  #p_1793 .commentbox {
    display: block;
    justify-content: space-between; }
    #p_1793 .commentbox .photo {
      width: 100%;
      text-align: center;
      margin-bottom: 30px; }
    #p_1793 .commentbox .detail {
      width: 100%; } }