@charset "utf-8";
/*
Theme Name: design.sann-it.biz
Theme URI: http://design.sann-it.biz/
Author: laetitien
Author URI: http://design.sann-it.biz/
Description: 
Version: 1.0.0
*/
/************/
/* 共通      */
/************/
li {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    width: 100%;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    line-height: 1.5;
}
body {
    overflow-x: hidden; /* 横スクロールを無効にする例 */
}
h1 {
    margin: 0;
}
.sp_only{
  display: none;
}
.br-pc {
  display: block;
}
.br-sp {
  display: none;
}
.none {
	display: none;
}
.clear {
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}
.aligncenter {
	text-align: center;
}
.alignleft {
	text-align: left;
}
.alignright {
	text-align: right;
}
html { scroll-behavior: smooth;}
/* 2カラム */
.col-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 余白（任意） */
}
.col-2 .item {
  width: calc(50% - 10px); /* ２列 */
  box-sizing: border-box;
}
/* 3カラム */
.col-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 余白（任意） */
}
.col-3 .item {
  width: calc(33.333% - 14px); /* 3列 */
  box-sizing: border-box;
}
/* 4カラム */
.col-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 要素の余白（お好みで） */
}
.col-4 .item {
  width: calc(25% - 15px); /* 4列 */
  box-sizing: border-box;
}
/* パンくずリスト */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.8rem;
}
.breadcrumb__list:not(:last-of-type)::after {
    content: ">";
    margin: 0 .6em;
}
/* マージン */
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-100 {
  margin-top: 100px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-100 {
  margin-bottom: 100px;
}

/* JS */
/* TOPへ戻る */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  pointer-events: none;
  transition: 0.3s;
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top img {
  width: 200px;   /* 好きなサイズに変更OK */
  height: auto;
  border-radius: 50%; /* 丸い画像の場合は不要 */
}
/* スライダー */
.slider li {
    list-style: none;
}
.slider img {
    width: 100%;
    height: auto;
    display: block;
}
/* フェードイン */
.fade-in {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

.fade-in.show {
  opacity: 1;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 0.3秒遅れて開始 */
.fade-in-delay1 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}
.fade-in-delay1.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 0.6秒遅れて開始 */
.fade-in-delay2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.6s, transform 1s ease 0.6s;
}
.fade-in-delay2.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 初期状態（非表示） */
.pop-in {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.6s ease-out;
}
/* 表示時の状態 */
.pop-in.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 1280px以下　かつ　769px以上に適用されるCSS（タブレット用） */
@media only screen and (max-width: 1280px) and (min-width: 769px){
    /* 共通 */
	.menu_pc {
		width: 80%;
	}
}

/* 768px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 768px) {
   /* 共通 */
    html, body {
        margin: 0;
        padding: 0;
    }
    body {
        line-height: 1.5;
    }
    body {
        overflow-x: hidden; /* 横スクロールを無効にする例 */
    }

	.pc_only{
    	display: none !important;
  	}
  	.sp_only {
      	display: block !important;
  	}
  	.br-sp {
    	display: block;
  	}
  	.br-pc {
    	display: none;
  	}
	
    header {
        margin: 0;
        padding: 0;
    }
    #header .logo {
        height: 100px;
    }
    header h1, header p {
        margin-bottom: 0;
        width: 100%;
    }
	.menu_pc {
		display: none;
	}
	/* ヘッダー */
	#header {
	    height: 10rem !important;
	}
	#header {
		width: 100%;
	}
	#header .logo-img {
		height: auto;
        width: 100%;
	}
	/* コンテンツ */

    /* フッター */
    #footer {
        padding: 1rem 5%;
    }
}